0

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

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

感谢任何帮助。

谢谢。

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

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();
4

1 回答 1

0

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

       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) 
               });
           }
       });
于 2013-05-31T22:12:51.713 回答