使用骨干网中的路由器将数据推送到模型

Question

这种方法似乎有些不对劲...我继承了一个主干项目，这就是路由的完成方式：

APP.routes.on("route:default", function( actions ) {
    var url = some.api
    jsonp.request(url,function(data){
        var model= new mModel(data.someData);            
        var view = new MyView({model:model});
    });
});

我想知道这是否是一种可接受的标准方法，或者如果不是更好的解决方案。我找不到任何人做这种架构的例子。完整的代码重构不是 100% 可行的，但我正在尝试写一些问题。我担心的是这里的模型和视图耦合非常紧密。这种模式重复了 30 条左右的路线，所有路线都有自己的模型/视图配对。该应用程序还直接从视图发出嵌套 JSON 请求，这是一个完全独立的问题。无论如何，该应用程序非常慢，我正试图缩小原因，就像我说的那样，这看起来至少可以说是可疑的。

Answer 1

如何正确使用 Backbone 的路由器颇受争议，但通常您希望尽快向用户呈现内容，即使它只是一个加载器，因为这总比没有好。代码应该更像：

APP.routes.on("route:default", function( actions ) {
    var view = new MyView

    view.render()
});

MyView.js

// Abstract away the model's logic into the view
var MyView = Backbone.View.extend({

     el: '#main-content',

     template: _.template( '<blah>Some template</blah>' ),

     initialize: function(){
        this.model = new mModel()
     },

     // The model needs data first, so just return a loader while we wait
     render: function(){
        this.model.fetch({ 
            success: _.bind( this.onModelDoneFetching, this )
        })
        this.$el.html('<img class="loader" alt="Loading content" />')
        return this
     },

     // the model has the data so we can render content now
     onModelDoneFetching: function(){
        this.$el.html( this.template( this.model.toJSON() ) )
     }

})

如果您注意到 jsonp 浮动而不是 fetch 曾经被使用，这可能是因为您的应用程序的 API 不在同一个域中。在这种情况下，最好覆盖 Backbone 的内部 AJAX 方法。这样做看起来像：

Backbone.ajax = jsonp

虽然应用程序的缓慢可能不是由于 UI - 跨域请求很可能是性能滞后的地方。