如何从 handlebars 循环中检索数据并在 backbone 模型中使用它？

Question

我有一个问题让我挠头好几天了。我对 JavaScript 的了解不是很好，我还在学习，最重要的是我正在做一个项目，我被迫使用车把，Marionette 和其他东西不熟悉。

我有一个车把模板，如下所示：

{{#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> 之间，那么该值将正确输出到浏览器。我遇到的问题是从我使用生成的弹出窗口访问该 ID：

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

谁能告诉我我做错了什么？我需要从 data-imgid="{{id}}" 获取正确的动态生成的 imgid 但我每次都只得到相同的

如有任何帮助，我们将不胜感激。

提前致谢！

Answer 1

重组此解决方案的 marionette 方法是将每个循环替换为 CompositeView，并为其提供一组模型，每个模型将呈现一个 ItemView，该 ItemView 将在您的 dom 作为图像的单个行项目。

当您在该图像上单击删除时，ItemView 会收到该事件，并且传递给它的 model.id 将是正确的。

更多相关信息：http://marionettejs.com/docs/v2.4.7/marionette.compositeview.html

希望这对您有所帮助

Answer 2

您每次获得最后一个 ID 的原因是因为您是通过 ID 属性 selecting 元素：

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

不幸的是，您的模板在呈现的 <i> 个元素的每个上都有 id="delete-button-id"，因此当您尝试执行 document.getElementById它总是 return 具有该属性的最后一个元素。 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）。

要解决此问题，请从 <i> 中删除 id 属性。还要删除悬挂的 </a> 。您的模板现在应该如下所示：

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

现在，当您尝试 select deleteImage 中的元素时，您可以通过 jQuery/Marionette 这样做：

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

或者，如果您热衷于使用普通 JavaScript，您可以像这样获取 ID：

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

应该就可以了。您可以试用一下这个 JSBin，看看它是如何工作的： https://jsbin.com/fotiqisoye/edit?html,js,output

如何从 handlebars 循环中检索数据并在 backbone 模型中使用它？

How do I retrieve data from within a handlebars loop and use it within backbone model?

javascript

backbone.js

handlebars.js

marionette