构建我的backbone.js应用程序

Question

我正在使用 Require.js 创建 Backbone.js 应用程序。每个视图文件对应一个资源（例如“新闻”）。在每个视图文件中，我声明一个主干 每个操作的视图（“索引”、“新”等）。在我收到的视图文件的底部 来自路由器的必要信息，然后决定实例化哪个视图（基于从路由器传入的信息）。

这一切都运行良好，但它需要大量代码，而且似乎不是“backbone.js 方式”。一方面，我依靠 url 来管理状态。另一方面，我没有使用 _.bind，它出现在很多backbone.js 示例中。换句话说，我认为我做得不对，而且我的代码库有味道......关于如何更好地构建我的应用程序有什么想法吗？

router.js

define([
  'jquery',
  'underscore',
  'backbone',
  'views/news'], 
  function($, _, Backbone,  newsView){
    var AppRouter = Backbone.Router.extend({
        routes:{
            'news':'news',
            'news/:action':'news',
            'news/:action/:id':'news'
        },

        news: function(action, id){
            newsView(this, action, id).render();
        }
    });


    var intialize = function(){
        new AppRouter;
        Backbone.history.start()
    };

    return{
        initialize: initialize;
    };
}

news.js ('视图/新闻')

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/news',
  'text!templates/news/index.html',
  'text!templates/news/form.html'

  ], function($, _, Backbone, newsCollection, newsIndexTemplate, newsFormTemplate){

    var indexNewsView = Backbone.View.extend({
        el: $("#content"),

        initialize: function(router){
            ...
        },

        render: function(){
            ...
        }
    });

    var newNewsView = Backbone.View.extend({
        el: $("#modal"),

        render: function(){
            ...
        }
    });

    ...

    /*
     *  SUB ROUTER ACTIONS
     */

    var defaultAction = function(router){
      return new newsIndexView(router);
    }

    var subRouter = {
      undefined: function(router){return defaultAction(router);},

      'index': function(router){ return defaultAction(router);},

      'new': function(){
        return new newNewsView()
      },

      'create': function(router){
        unsavedModel = {
          title : $(".modal-body form input[name=title]").val(),
          body  : $(".modal-body form textarea").val()
        };
        return new createNewsView(router, unsavedModel);
      },

      'edit': function(router, id){
        return new editNewsView(router, id);
      },

      'update': function(router, id){
        unsavedModel = {
          title : $(".modal-body form input[name=title]").val(),
          body  : $(".modal-body form textarea").val()
        };

        return new updateNewsView(router, id, unsavedModel);
      },
    }

    return function(router, action, id){
      var re = /^(index)$|^(edit)$|^(update)$|^(new)$|^(create)$/
      if(action != undefined && !re.test(action)){
        router.navigate('/news',true);
      }
      return subRouter[action](router, id);
    }


  });

Answer 1

虽然我觉得强调没有真正的“Backbone.js 方式”很重要，但看起来您确实正在复制 Backbone 应该为您做的工作。

我同意为应用程序的每个独立部分配备一个专门的路由器是有意义的。但乍一看，您在“子路由器”部分所做的只是重新创建 Backbone.Router 功能。您的 AppRouter 根本不需要处理 /news URL；您只需使用特定于新闻的路由初始化 NewsRouter 即可，它将处理与新闻相关的 URL：

var NewsRouter = Backbone.Router.extend({
    routes:{
        'news':             'index',
        'news/create':      'create',
        'news/update/:id':  'update',
        'news/edit/:id':    'edit'
    },

    index: function() { ... },

    create: function() { ... },

    // etc
});

只要在调用 Backbone.history.start() 之前对其进行初始化即可code>，它将捕获其路由的 URL 请求，并且您永远不必处理 AppRouter。您也不需要处理视图底部丑陋的代码 - 这基本上只是做核心 Backbone.Router 为您做的事情。

Answer 2

我也使用 require.js 和backbone，我认为我建议的主要区别是每个文件应该只返回一个视图、模型、路由器或集合。

所以我的主 html 页面需要我的主路由器。该路由器是一个模块，需要一些基于其每条路由的视图和一个引导模型。每个路由器方法将相关的引导模型片段传递给相关的视图。

从那里开始，只要每个文件只是 1 个主干事物（模型、集合、视图、路由器）并且只需要它使用的元素，它就保持非常干净。这会产生大量 js 文件（我当前的项目大约有 100 个），但这就是 require.js 优化发挥作用的地方。

我希望这有帮助。

Answer 3

为什么不这样构建你的路线：

        routes:{
            'news':'news',
            'news/edit/:id':'editNews',
            'news/new':'newNews',
            ...
        }