Как получить данные из цикла handlebars и использовать его в базовой модели?

Question

У меня проблема, которая заставила меня почесывать голову целыми днями. Мои знания о JavaScript невелики, я все еще участвую, и, прежде всего, я работаю над проектом, где я вынужден использовать рули, марионетку и другие вещи, с которыми я не знаком.

У меня есть шаблон Рули, который выглядит следующим образом:

{{#if images}} 
    {{#each images}} 
     <div class="image-thumbnail"> 
      <i class="delete-button" style="cursor:pointer" id="delete-button-id" data-imgid="{{id}}"></i> 
      <img src="{{thumbnail}}"/></a> 
     </div> 
    {{/each}} 

все это выглядит хорошо, когда страница загружается, никаких проблем. Если я поставлю {{id}} между <i>{{id}}</i>, тогда значение будет корректно выводиться в браузере. Проблема у меня есть доступ к этим идентификатор из всплывающего окна, которое я генерации с помощью:

deleteImage: function(event) { 
    new DeleteView({model: new Backbone.Model()}).render().$el.appendTo('body'); 
}, 

Я попытался добавить следующее:

new DeleteView({model: new Backbone.Model({ imgid: imageID })}).render().$el.appendTo('body'); 

и установка imgid с помощью:

var imageElement = document.getElementById('delete-button-id'); 
var imageID = imageElement.getAttribute('data-imgid'); 

К сожалению, это только последние imgid, и все одинаково для каждого. Страница в основном представляет собой список фотографий, которые генерируются из цикла рулей. На странице могут быть десятки, а imgid я получаю, когда всплывающие окна должны быть конкретными для тех, которые я нажал.

Мой главный вид для страницы, где отображаются изображения:

var ThumbnailView = Marionette.ItemView.extend({ 
    template: getTemplate('profile/thumbnail'), 
    className: 'main-gallery', 
    events: { 
     'click .delete-button': 'deleteImage' 
    } 

    ... more code follows ... 

Может кто-нибудь сказать мне, что я делаю неправильно? Мне нужно получить правильный динамически генерируемый imgid от data-imgid="{{id}}", но я получаю только один и тот же каждый раз.

Любая помощь была бы принята с благодарностью.

Заранее благодарен!

Answer 1

Причина, почему вы получаете последний идентификатор каждый раз, потому что вы выбираете элемент с помощью атрибута ID:

document.getElementById('delete-button-id'); 

и к сожалению, ваш шаблон id="delete-button-id" на каждый из <i> элементов визуализируется, поэтому при попытке сделать document.getElementById он всегда будет возвращать последний элемент с этим атрибутом. Атрибут id (в отличие от class) должен быть уникальным, и согласно W3C он должен быть уникальным в документе. Если это не так, это может вызвать проблемы, подобные тем, которые вы видите (см. Здесь для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/API/Element/id, https://www.w3.org/TR/html401/struct/global.html#h-7.5.2).

Чтобы исправить это, удалите атрибут id из <i>. Также удалите оборку </a>. Ваш шаблон должен выглядеть:

{{#each images}} 
    <div class="image-thumbnail"> 
     <i class="delete-button" style="cursor:pointer" data-imgid="{{id}}"></i> 
     <img src="{{thumbnail}}"/> 
    </div> 
{{/each}} 

Теперь, когда вы пытаетесь выбрать элемент в deleteImage, вы можете сделать это с помощью JQuery/марионеток, выполнив:

var imageId = this.$(event.currentTarget).data('imgid'); 

Или, если вы вы можете получить идентификатор, похожий на такой код:

var imageId = event.currentTarget.getAttribute('data-imgid'); 

И это должно быть сделано. Вы можете поиграть с этим JSBin, чтобы посмотреть, как он будет работать: https://jsbin.com/fotiqisoye/edit?html,js,output

Answer 2

метод марионетки для реструктуризации этого решения состоял бы в том, чтобы заменить каждый цикл на CompositeView и передать ему коллекцию моделей, каждая из которых будет визуализировать ItemView, которая будет представлена ​​в вашем доме как отдельная статья изображения.

, когда вы нажимаете delete на этом изображении, ItemView получает событие, и model.id, переданный в него, будет правильным.

подробнее об этом здесь: http://marionettejs.com/docs/v2.4.7/marionette.compositeview.html

надеюсь, что это помогает