Backbone.js 如何使用带有胡子和未知视图数的主干？

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

{{{#logos}
更新
删除
{{/logos}}

我是主干网新手，我不知道如何将每个更新/删除按钮与其对应的徽标/标题“关联”。考虑到运行时图像的数量未知，最好的方法是什么？

您有两个问题：

你怎么知道按下了哪个按钮

你如何知道你使用的是哪个徽标

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

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

另外，在使用

时，您应该始终指定

类型

属性，规范中说

是默认值，但有些浏览器使用

。如果您总是指定

type=“button”

，您就不必担心浏览器会出现什么样的废话

现在你必须弄清楚你使用的是哪个标志

一种方法是继续使用单个视图，并将数据属性附加到易于找到的位置。例如：

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

演示：

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

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

以及一个没有

{{{logos}}

循环或外部per徽标的模板

：

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

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;
    },
    //...
});

演示：

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

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

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

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;
    },
    //...
});