прохождение базовой коллекции для просмотра

Question

Я только начинаю с позвоночника/грааля, и я изо всех сил пытался выяснить, как заставить все работать.

Я создаю конфигуратор ценообразования, в котором пользователь выбирает тип продукта из группы радиодоступа A и группы радиодобавок B, содержащей данные о количестве/ценах/скидках, будет делать ajax-вызов для бэкэнд для обновленных данных ценообразования. Я не хочу раскрывать свой алгоритм ценообразования до конца, поэтому я думал, что буду использовать магистраль для обработки моего запроса/шаблона ajax.

Я не хочу полностью полагаться на js для создания моего пользовательского интерфейса, поэтому при загрузке начальной страницы я создам представление gsp с помощью grails. Единственная проблема, которую я заметил, - это мое представление gsp заменялось моим шаблоном handlebars при начальной загрузке страницы. Я думаю, это прекрасно, за исключением двух одинаковых запросов, которые не являются оптимальными.

Как бы то ни было, мой код, который, похоже, не работает.

<script id="priceTemplate" type="text/x-handlebars-template"> 
    <tr> 
     <td><input type="radio" value="" name="quantity">{{quantity}}</td> 
     <td class="price"><span>{{price}}</span></td> 
     <td class="discount"><span>{{discount}}</span></td> 
    </tr> 
</script> 

<asset:javascript src="bb_product/config.js"/> 

<script> 
    var prices = new models.PriceList([],{productId:${productInstance.id}}); 
    var priceView = new PriceView({collection: prices}); 
    prices.fetch();  
</script> 

Модели

var models = {}; 

models.PriceModel = Backbone.Model.extend({ 
    //Is the model automatically populated from the collections json response? 
}) 

models.PriceList = Backbone.Collection.extend({ 
    initialize: function(models, options) {  
     this.productId = options.productId; 
    }, 
    model: models.PriceModel, 
    url: function() { 
      return '../product/pricing/' + this.productId + '.json' 
     } 
}); 

Посмотреть

var PriceView = Backbone.View.extend({ 
    el: '#product-quantities', 

    template: Handlebars.compile($("#priceTemplate").html()), 

    initialize: function(){ 
     this.render(); 
    }, 

    render: function() { 
     console.log('collection ' + this.collection.toJSON()) //comes back empty 
     this.$el.html(this.template(this.collection.toJSON())); 
    } 

}); 

JSON, возвращаемые URL

[{"id":1,"quantity":10,"price":"10","discount":"10"},{"id":2,"quantity":50,"price":"20","discount" 
:"10"}] 

Чтобы изначально получить это и работать, что мне не хватает, чтобы отобразить все элементы в объекте json?

Я также вижу этот код вокруг, не зная, что он делает this.listenTo(this.collection, 'reset', this.render);

Answer 1

Причина вы не видите каких-либо предметов в том, что элементы не являются на самом деле не в коллекции, пока после того, как вид визуализации. Посмотрите на эти две строки кода:

var priceView = new PriceView({collection: prices}); 
prices.fetch(); 

Первая строка делает вид (так как вы вызываете render изнутри initialize). Однако в то время коллекция prices пуста. Затем вторая строка извлекает данные с сервера и загружает их в коллекцию; но к тому времени представление было предоставлено.

Это последняя строка кода вы вывесили является ключом к решению этой:

this.listenTo(this.collection, 'reset', this.render); 

Обычно вы поставите это внутри initialize функции в классе представления. Что это значит - «слушать» экземпляр коллекции, и когда происходит событие reset, он вызывает функцию this.render. (Конечно, метод this.listenTo может «прослушивать» другие объекты для других событий, см. Подробности in the Backbone documentation).

Если вы добавите эту строку в функцию вида initialize, представление будет повторно отображаться всякий раз, когда происходит событие «перезагрузки» в коллекции.

ОДНАКО, событие «перезагрузки» по умолчанию происходит, когда все модели в коллекции заменяются другим набором моделей, и это не происходит по умолчанию, когда вы вызываете метод коллекции fetch (вместо этого коллекция попробует «smart-update»).Чтобы вызвать сброс коллекции при использовании fetch, передать {reset: true} в качестве параметра:

prices.fetch({reset: true});