Backbone как получить конкретный объект в массиве

Question

Мой API возвращает массив JSON как это:

cars:[ 
    { 
    "id" : "1", 
    "fabrication" : "AUDI", 
    "description" : "some text", 
    "image"  : "some image" 
    }, 
    { 
    "id" : "2", 
    "fabrication" : "BMW", 
    "description" : "some text", 
    "image"  : "some image" 
    }, 
    { "id" : "3", 
    "fabrication" : "MERCEDES", 
    "description" : "some text", 
    "image"  : "some image" 
    }, 
    { 
    "id" : "4", 
    "fabrication" : "PORSCHE", 
    "description" : "some text", 
    "image"  : "some image" 
    }  
] 

Так что теперь у меня есть этот список моделей данных, предоставляемых в шаблоне Рули Html. Моя цель состоит в том, чтобы щелкнуть по элементу, а затем отобразить детали для щелкнутого элемента.

Вот HTML

<div> 
    {{#each this}} 
    <div> 
     <a class="item" item-id="{{id}}> 
     <h1>{{fabrication}}</h1> 
     <img src="{{someimage}}" /> 
     </a> 
    </div> 
    {{/each} 
</div> 

Код Backbone:

events: { 
    'click .item': 'showDetails' 
}, 

showDetails:function(e) { 
    e.preventDefault(); 
    var item = $(e.currentTarget).data('id'); 
} 

До сих пор так хорошо, я получаю правильный идентификатор, но как я могу получить остальную часть данных и отображать их в новом взгляде?

Любая помощь приветствуется ...

Answer 1

Проблема здесь состоит в том, что каждый из ваших автомобилей должны идеально быть сам вид. Таким образом, у вас не было бы each в ваших рулях, вместо этого вы бы отображали ItemView для каждой модели в вашей коллекции автомобилей. Взгляните на Marionette'sCollectionView и ItemView, чтобы понять, что я имею в виду.

Однако, если вы хотите принять ваш нынешний подход, следующее должно работать для вас:

showDetails:function(e) { 
    e.preventDefault(); 

    var carId = $(e.currentTarget).data('id'); 

    var carModel = this.collection.findWhere({ id: carId }); 

    this.$('#extra-detail-container').html(new CarDetailView({ 
     model: carModel 
    }).render().el); 
}