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}，在这种情况下，集合将（有效地）重置。

所以就这样：

this.collection.fetch()

将触发Backbone 1.0+ 中的'add'、'remove'和事件，而不是像旧版本的 Backbone 那样'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 回答