0

json オブジェクトを表すバックボーン コレクションがあり、このオブジェクトをテンプレートに反復処理するビューでレンダリングしようとしています。ブレークポイントは、json配列を配列に読み取れないことだったと思います

コレクションの戻り配列

{

    "calls": [
        {
            "callId": "173",
            "company": "Company 1",
            "status": "open",
            "DueDate": "2013-06-10 00:00:00",
            "EmployeeId": "12"
        },
        {
            "callId": "170",
            "company": "company 2",
            "status": "done",
            "DueDate": "2013-05-27 14:27:37",
            "EmployeeId": "11"
        },
        {
            "callId": "169",
            "company": "Company 3",
            "status": "open",
            "DueDate": "2013-05-20 00:00:00",
            "EmployeeId": "11"
        }
]

}

ルート

// Filename: router.js
define([
    'jquery',    
    'underscore',
    'backbone',    
    'app/collections/schedule',
    'app/views/schedule',
    'app/views/dashboard'
], function($, _, Backbone, ScheduleCollection, ScheduleView, DashboardView) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            // Define some URL routes
            'dash': 'defaultRoute',
            'schedule': 'scheduleRoute',
            'accounts': 'accountsRoute',
            'reports': 'reportsRoute',
            // Default
            '*actions': 'defaultRoute'
        },
        scheduleRoute: function() {
            // Create a new instance of the collection
            // You need to set the url in the collection as well to hit the server
            var schedulecollection = new ScheduleCollection();
            // Pass in the collection as the view expects it            
            var scheduleview = new ScheduleView({
                collection: schedulecollection                        
            });            
           //scheduleview.initialize();
           // No need of calling render here
           // as the render is hooked up to the reset event on collection          
        },
        defaultRoute: function(actions) {            
            // We have no matching route, lets display the home page
            DashboardView.render();
        }
    });

    var initialize = function() {                
        var app_router = new AppRouter;
        Backbone.history.start();
    };
    return {
        initialize: initialize
    };
});

コレクション

// Filename: collections/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'app/models/schedule'
], function ($, _, Backbone, ScheduleModel) {
    var ScheduleCollection = Backbone.Collection.extend({
        model: ScheduleModel,
        url: "http://sam-client:8888/sam-client/i/schedule",
        initialize: function () {
            //console.log('schedule collections loaded successfully');
        }
    });
    return ScheduleCollection;
});

意見

// Filename: views/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'text!templates/schedule.html'
], function ($, _, Backbone, ScheduleTemplate) {

    var scheduleView = Backbone.View.extend({        
        el: $("#test"),
        initialize: function () {
            // Listen to the reset event which would call render
            this.listenTo(this.collection, 'reset', this.render());
            // Fetch the collection that will populate the collection
            // with the response 
            this.collection.fetch();                            
        },
        render: function () {   
            var data = {
              schedule: this.collection.models,
              _: _
            };
            var compiledTemplate = _.template(ScheduleTemplate, data);
            this.$el.html(compiledTemplate);                
        }
    });  
    return scheduleView;
});

テンプレートで

<ul>
  <% _.each(schedule, function(call){ %>
   <li><%= call.get("company") %> - <%= call.get("DueDate") %></li> 
  <% }); %>
</ul>

問題は、反復するためにテンプレートに渡されるデータがないことです。

4

1 に答える 1

0

Collection#fetchBackbone 1.0で変更された の動作:

フェッチ collection.fetch([options])

[...] モデル データがサーバーから返されると、setを使用して、取得したモデルを (インテリジェントに) マージします。渡し{reset: true}た場合、コレクションは (効率的に) resetになります。

だからこれだけ：

this.collection.fetch()

バックボーンの古いバージョンのような単一のイベントではなく、バックボーン 1.0+ の'add'、'remove'、およびイベントをトリガーします。あなたが言うなら：'change''reset'

this.collection.fetch({ reset: true })

その後、イベントを取得します'reset'。

次の問題は、JSON 形式です。バックボーン コレクションは、受信データがモデル属性オブジェクトの単純な配列であることを想定していますが、JSON には内部にネストされた配列があります"calls"。parseコレクションにアンラップするメソッドを提供できます。

parse: function(response) {
    return response.calls;
}

あなたはあなたの中にそのメソッドが欲しいでしょうScheduleCollection.

于 2013-09-23T20:51:26.787 に答える