뷰를 사용하여 백본 컬렉션을 표시하려면 어떻게합니까?

Question

저는 RESTful API로 Laravel과 함께 BackBone을 사용하는 간단한 예약 시스템을 연구 중입니다.

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