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>之间，则该值会正确输出到浏览器。我遇到的问题是从弹出窗口访问该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 ...

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

非常感谢任何帮助。

提前致谢！

Answer 1

重构这个解决方案的牵线木偶方法是用CompositeView替换你的每个循环，并为它提供一组模型，每个模型将渲染一个ItemView，它将在你的dom中表示为一个单项的图像。

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

此处更多内容：http://marionettejs.com/docs/v2.4.7/marionette.compositeview.html

希望这会有所帮助

Answer 2

您每次获取最后一个ID的原因是您通过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 / 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

如何从手柄循环中检索数据并在骨干模型中使用它？

2 个答案: