如何使用视图显示主干集合？答案

【问题标题】：How do I display a backbone collection using a view?如何使用视图显示主干集合？
【发布时间】：2014-11-23 11:58:11
【问题描述】：

我正在开发一个使用 BackBone 和 Laravel 作为 RESTful API 的简单预订系统。

我是 BackBone 的新手，所以只需要一些关于如何组合在一起的建议。

系统将要求用户选择曲目、日期和活动类型，并显示剩余的位置。

到目前为止，我的（非常简单的）主干应用程序如下所示：

型号

 CalEvent = Backbone.Model.extend({
    idAttribute: 'ID',
    defaults: {
      ID: '',
      EventID: '',
      CircuitID: '',
      StartTime: '',
      EventFormatID: '',
      TotalPlaces: '',
      BookedPlaces: '',
      ProvisionalPlaces: ''
    },
    url: '/tracker/booking'
  });

   var CalEvents = Backbone.Collection.extend({
  model : CalEvent
});

var calEvents = new CalEvents;

var search_params = {
  'CircuitID': 53,
  'EventFormatID': 224,
  'StartTime': '2014-11-04'
};

calEvents.fetch({
  data: $.param(search_params),
  success: function (cal) {
          _.each(cal.models, function(model) {
            console.log(model.toJSON());
          })
       },
       error: function(model, xhr, options)
       {
         console.log(xhr);
       }
});

到目前为止，一切都很好。这会连接到传递数据的 laravel 应用程序并为每个事件返回 JSON 对象：

{ID: 18, EventID: 155957, CircuitID: 53, StartTime: "2014-11-04 17:15:00", EventFormatID: 224, RemainingPlaces: 18}

我需要的是，当用户选择日期、曲目和事件类型时，这些数据将被收集，传递给 laravel 应用程序，然后将数据呈现给用户（特别是 RemainingPlaces）。

我很难理解 BackBone 的 View 部分如何“监听”事件（即用户选择他们的选项），使用数据调用集合，然后将其呈现在屏幕上。

任何帮助将不胜感激

更新

我创建了以下视图：

var CalView = Backbone.View.extend({
el : $(".booking"),
initialize: function(){
    this.EventID = this.model.get('EventID');
    console.log('thingy'+this.EventID);
},
events: {
    'click' : 'clickHandler'
},
clickHandler:function(evt){

  var search_params = 
  {
    'CircuitID': 53,
    'EventFormatID': 224,
    'StartTime': '2014-11-05'
  };

  this.collection.fetch({
  data: $.param(search_params),
  success: function (cal) {
          _.each(cal.models, function(model) {
            //console.log(model.toJSON());
          })
       },
       error: function(model, xhr, options)
       {
         //console.log(xhr);
       }
  });

  this.render();
},
render:function(){
     console.log('render');   
    _.each(this.collection.models, function (m, i, l) { 
        console.log('Booked Places: '+m.get('TotalPlaces'));           
    });
}

});

搜索参数将根据用户点击确定并传递给collection.fetch()函数。

这是正确的做法吗？？

我注意到的一个问题是，当我单击元素时，前几次没有返回任何结果（没有错误消息）。单击 3 或 4 次后，返回结果并显示在控制台中。

提前致谢

【问题讨论】：

你能加入你的观点吗？在 Backbone 视图中侦听/触发事件有多种方式。
感谢您的回复。我目前没有书面意见....我不确定从哪里/如何开始！任何指针都会很棒。
这是一个基本模型和视图的小提琴。正在改装以使用集合http://jsfiddle.net/oakley349/ate0Lpos/8/
感谢您的帮助。基于小提琴我创建了一个视图（在主要问题中更新）。我在 click 函数中获取结果的方式是正确的吗？再次感谢
这里是使用模板中内置的下划线呈现集合视图的示例。（虽然把手更好用）jsfiddle.net/oakley349/hsxfw89b

标签： backbone.js laravel

【解决方案1】：

我认为这就是你想要做的。
你可以在这个 fiddle 中运行它，其中包含一些 css：http://jsfiddle.net/oakley349/hsxfw89b/

HTML：

<script type="text/template" id="artist-list-template">
    <table> <thead> <tr> <th> Name </th>
        <th>Hometown</th > <th> Favorite Color </th>
    </tr> </thead>
        <tbody>
        <% _.each(events, function(event) { %>
        <tr>
            <td><%= event.get('ID') %></td>
            <td><%= event.get('EventID') %></td>
            <td><%= event.get('CircuitID') %></td>
            <td><%= event.get('StartTime') %></td>
            <td><%= event.get('EventFormatID') %></td>
            <td><%= event.get('RemainingPlaces') %></td>        
         </tr>
         <% }); %>
        </tbody> </table>
</script>

主干/JS

var CalEvent = Backbone.Model.extend({
    idAttribute: 'ID',
    defaults: {
        ID: '',
        EventID: '',
        CircuitID: '',
        StartTime: '',
        EventFormatID: '',
        TotalPlaces: '',
        BookedPlaces: '',
        ProvisionalPlaces: ''
    },
    url: '/tracker/booking'
});

var events = [{
    ID: 18,
    EventID: 155957,
    CircuitID: 53,
    StartTime: "2014-11-04 17:15:00",
    EventFormatID: 224,
    RemainingPlaces: 18
}, {
    ID: 56,
    EventID: 123443,
    CircuitID: 23,
    StartTime: "2014-11-04 17:15:00",
    EventFormatID: 224,
    RemainingPlaces: 18
}, {
    ID: 34,
    EventID: 653464,
    CircuitID: 43,
    StartTime: "2014-11-04 17:15:00",
    EventFormatID: 224,
    RemainingPlaces: 18
}];

var CalEvents = Backbone.Collection.extend({
    model: CalEvent
});

var CalView = Backbone.View.extend({
    el: 'body',
    events: {
        'click td': 'clickHandler'
    },
    initialize: function () {
        this.render();
    },
    clickHandler: function (evt) {
        alert('Clicked ' + evt.currentTarget.textContent);
    },
    render: function () {
        var that = this;
        var template = _.template($('#artist-list-template').html());
        var compiled = template({
            events: that.collection.models
        });
        this.$el.append(compiled);
    }
});
var calView = new CalView({
    collection: new CalEvents(events)
});

【讨论】：