0

私は Backbone.js の初心者です。複数のテーブルがある UI を作成しようとしています。JSON 形式でデータを提供する 2 つの個別の URL があります。最初の URL は、テーブルの構造、つまり、列ヘッダー、幅、テーブル内のデータが取得される対応する dbfield 名を示します。2 番目の URL は、テーブルのデータを提供します。この URL は、最初の URL で使用可能なパラメーターとして ID を取ります。たとえば、4 つのテーブルがある場合、最初の URL は 4 つのテーブルすべての構造の詳細を提供し、2 番目の URL はテーブルの異なる ID に対して 4 回呼び出され、レンダリングされる必要があります。

Backbone.js を使用してこれを行う方法に関する提案。最初の URL を操作して 4 つのテーブルを作成できましたが、最初のコレクションをループして 2 番目の URL を呼び出して、2 番目の URL からテーブルにデータを追加する方法について助けが必要です。

これに関する支援に感謝します。

ありがとう。

以下は、最初の URL からデータを取得し、それをテンプレートに渡して html を生成するために使用するバックボーン コードです。このデータに含まれるフィールドの 1 つは、2 番目の 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

これが私が思いついたものです。2 つの個別のコレクションを使用します。これをローカルでテストしたところ、うまくいきました。

       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 に答える