Как отобразить базовую коллекцию с помощью представления?

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).

Я пытаюсь понять, как View часть 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'));   
    }); 
} 

});

Поиск Params будет определяться на основе щелчка пользователей и передачи функции 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> 

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