Question

我正在使用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部分如何能够倾听＆＃39;对于事件（即用户选择他们的选项），使用数据调用集合，然后在屏幕上呈现它。

非常感谢任何帮助

更新

我创建了以下视图：

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次后，结果将返回并显示在控制台中。

提前致谢

Answer 1

我认为这就是你要做的事你可以在这个小提琴中运行它，包括一些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)
});

如何使用视图显示骨干集合？

1 个答案: