如何使用視圖顯示骨幹網集合？

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的視圖部分如何「聽」事件（即用戶選擇他們的選項），用數據調用集合，然後將其呈現在屏幕上。

任何幫助，將不勝感激

更新

我創建了以下觀點：

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) 
});