Question

我是Backbone.js的新手。我正在尝试创建一个我有多个表的UI。有2个单独的URL以JSON格式提供数据。第一个url给出了表的结构，即列标题，宽度，表中数据来自的相应dbfield名称。第二个url为表提供数据。此url将id作为第一个url中可用的参数。所以对于例如，有4个表，那么第一个url将给出所有4个表的结构细节，第二个url将需要被调用4次，用于表的不同id并呈现。

有关如何使用Backbone.js执行此操作的任何建议。我已经能够使用第一个url并创建了4个表，但是需要有关如何通过循环第一个集合并调用第二个URL来将第二个URL中的数据添加到表中的帮助。

对此表示感谢。

感谢。

以下是我用来从第一个网址获取数据的骨干代码，并将其传递给我的模板以生成html。此数据中的一个字段是第二个网址的参数。

var mModel = Backbone.Model.extend();

var Collection = Backbone.Collection.extend({
    model: mModel,
    url: 'http://xyz.com/sendjson',

    initialize: function () {
        this.deferred = this.fetch();
    }
});

var View = Backbone.View.extend({
    render: function () {

        var collection = this.collection;

        collection.deferred.done(function () {

            var template = _.template($('#template').html(),
            {
                Collection: Collection
            });
            $('#main').html(template);
        });
    }
});

var myCollection = new Collection();

var myView = new View({
    collection: myCollection
});

myView.render();

Answer 1

好的，这就是我想出来的。它使用两个单独的集合。我在本地进行了测试，它对我有用。

       var mUrl = '/sendjson'
       var iUrl = '/senditem'

       var mCollection, iCollection

       var MModel = Backbone.Model.extend({})
       var IModel = Backbone.Model.extend({urlRoot: iUrl})

       var IView = Backbone.View.extend({
           template: '<%= mModel.color %><%= iModel.name %>',
           render: function() {
               var html = _.template(this.template, {
                   mModel: this.mModel.toJSON(), 
                   iModel: this.iModel.toJSON()
               })
               this.$el.html(html)
               return this
           }
       })

       var MCollection = Backbone.Collection.extend({
           model: MModel,
           url: mUrl
       });

       var ICollection = Backbone.Collection.extend({
           initialize: function(app, ids) {
               var self = this
               _.each(ids, function(id) { 
                   var iModel = new IModel({ id: id })
                   self.add(iModel)
                   app.listenTo(iModel, 'sync', function() {
                       var view = app.mCollection.get(iModel.id).view
                       view.iModel = iModel
                       app.$el.append(view.render().$el)
                   });
                   iModel.fetch()
               });
           }
       });

       var App = Backbone.View.extend({
           el: '#main',

           initialize: function() {
               this.mCollection = new MCollection()
               var app = this

               this.mCollection.on('sync', function () {
                   app.mCollection.each(function(mModel) {
                       var iview = new IView()
                       iview.mModel = mModel
                       iview.iModel = new IModel
                       mModel.view = iview
                   })
                   app.render()
                   var items = new ICollection(app, 
                      app.mCollection.map(function(mModel) {
                      return mModel.get("parent").child1.child2.id;
                   });

               this.mCollection.fetch();
           },

           render: function () {
               var that = this
               this.mCollection.each(function(mModel) { 
                   that.$el.append(mModel.view.render().$el) 
               });
           }
       });

Backbone.js表 - 表结构和基础数据的单独URL

1 个答案: