Question

我使用小胡子来渲染一系列图像。每个图像都附有用于设置图像标题的文本输入，用于通过Ajax更新数据库中标题的更新按钮，以及用于从数据库中删除图像的删除按钮（也通过Ajax）：

{{#logos}}
<div class="logo">
    <div class="logo-input">
        <input type="text" placeholder="Caption" value="{{caption}}" />
    </div>
    <div class="logo-buttons">
        <button>Update</button>
        <button>Delete</button>
    </div>
</div>
{{/logos}}

我是骨干的新手，我无法弄清楚如何联系＆＃34;每个更新/删除按钮及其对应的徽标/标题。考虑到运行时图像的数量未知，最好的方法是什么？

Answer 1

你有两个问题：

您如何知道按下了哪个按钮？
您如何知道与之合作的徽标？

解决第一个问题的最简单方法是将一个类附加到按钮：

<button type="button" class="update">Update</button>
<button type="button" class="delete">Delete</button>

然后，您可以使用视图events将事件直接绑定到按钮：

events: {
    'click .update': 'update_caption',
    'click .delete': 'delete_caption'
}

此外，您应该在使用type时始终指定<button>属性，规范说明<button type="button">是默认属性，但有些浏览器使用<button type="submit">。如果您始终指定type="button"，则不必担心浏览器会遇到什么样的废话。

现在你必须弄清楚你正在使用哪个徽标。

一种方法是继续使用单个视图并在易于查找的地方附加数据属性。例如：

{{#logos}}
    <div class="logo" data-logo="{{id}}">
        <!-- ... -->
    </div>
{{/logos}}

然后你可以在点击处理程序中执行以下操作：

update_caption: function(ev) {
    var id   = $(ev.currentTarget).closest('.logo').data('logo');
    var logo = this.collection.get(id);
    //...
}

演示：http://jsfiddle.net/ambiguous/DwkPV/

或者，您可以为每个徽标使用一个子视图。在这里，每个徽标都有一个视图：

var LogoView = Backbone.View.extend({
    className: 'logo',
    events: {
        'click .update': 'update_caption',
        'click .delete': 'delete_caption'
    },
    //...
});

以及没有{{#logos}}循环或外部每徽标<div>的模板：

<div class="logo-input">
    <input type="text" placeholder="Caption" value="{{caption}}" />
</div>
<div class="logo-buttons">
    <button>Update</button>
    <button>Delete</button>
</div>

点击处理程序只会查看this.model：

update_caption: function() {
    var logo = this.model;
    //...
}

然后是一个主视图，用于迭代徽标并渲染子视图：

var LogosView = Backbone.View.extend({
    render: function() {
        this.collection.each(function(logo) {
            var v = new LogoView({ model: logo });
            this.$el.append(v.render().el);
        }, this);
        return this;
    },
    //...
});

演示：http://jsfiddle.net/ambiguous/9A756/

如何使用胡子和未知数量的视图骨干？

1 个答案: