javascript - 主干操作方法重复 subview

Question

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

然而，目前我似乎已经将自己编码到一个 Angular 落，因为我所做的事情使得附加到 View 的最后一个 subview 似乎是 DOM 唯一关注的一个，其他 subview 不再出现绑定(bind).

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

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 评论指出了正确的方向。由于这是重用 View 的一种非常常见的模式，我建议的解决方案是利用像 BackboneLayoutManager 这样的工具。 。这样您就不必指定 el，而通常指定 classname 或 id。然后，您使用像 insertView 这样的函数来重用相同的 View 并将其 Hook 到不同的 jQuery 选择器中，这些选择器用作父 View 模板中的占位符

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

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

快速screencast