Question

好的，我有一个主视图，其中我加载了多个子视图。其中一个特定的子视图是故意重复的。此子视图是无序列表，每个列表项都是其自己的模型（或应该是），并且这些重复的子视图中的每一个都有自己的一组事件。

然而，我似乎已将自己编入角落，因为我所做的事情使得看起来附加到视图的最后一个子视图是DOM正在考虑的唯一一个，其他的不再出现绑定

这是与我的困境最相关的代码。

var myApp = myApp || {Models:{}, Collections:{}, Views:{}, Activated:{}}
(function () {
    'use strict';
    myApp.Views.PortForwardView = Backbone.View.extend({
        el: '.__wrapper',
        initialize: function () {
            this.render();
            this.model = new listItem();
            this.listenTo(this.collection, 'add', this.renderItem);
            return this;
        },

        // loading the primary DOM containers
        render: function () {
            this.$el.html(z.fromTemplate('main-list'));
            return this;
        },

        // Render a lone row to the DOM
        renderItem: function (data) {
            var subView = new myApp.Views.SubListItemView();
            data = data.toJSON();
            this.$el.find('.__existing').append(subView.render(data));
            return this;
        },

    });

    myApp.Views.SubListItemView = Backbone.View.extend({
        el: '.__existing',
        events: {
            'click .__update' : 'updateRule'
        },

        render: function (data) {
            $('.__existing__empty').remove();
            return z.fromTemplate('main-list-row', data);
        },

        updateRule: function (event) {
            var $elem = $(event.currentTarget);
            console.log($elem.closest('form').find('input#id').val())
        }

    });
})();

Answer 1

@Jack评论指向了正确的方向。由于这是重用视图的一种非常常见的模式，我建议的解决方案是利用BackboneLayoutManager之类的工具。这样您就不会指定el，而是指定classname或id。然后使用insertView之类的函数重用并将相同的视图挂钩到父视图模板中用作占位符的不同jQuery选择器

myApp.Views.PortForwardView.setView("subViewHolder1", new myApp.Views.SubListItemView());

myApp.Views.PortForwardView.setView("subViewHolder2", new myApp.Views.SubListItemView());

快速screencast

Backbone如何重复子视图

1 个答案: