Question

我正在尝试创建一个动态Widget系统来在我的页面内创建面板。让我们举了一个例子：

                Widgets.create({
                    name : 'menu-site',
                    title: 'Menu', 
                    content: 'This is my menu!'
                });

它将呈现：

<section class="widget menu-site">
    <h1>Menu</h1>
    <article>This is my menu!</article>
</section>

好吗？我做了一千次。但是，当我尝试使用内部视图时，问题就出现了：

                var view = new MyCustomView;                  
                Widgets.create({
                    name : 'custom-panel',
                    title: 'Custom Panel', 
                    content: view.render().el
                });

我可以通过调用WidgetView中的outerHTML来呈现内容，但是，当我这样做时，在MyCustomView中声明的事件不起作用！

有人遇到过这个问题吗？

对于那些需要更多细节的人来说，这是我的WidgetView代码：

        var Widget = Backbone.Model.extend({
            defaults : function() {
                return {
                    title : '',
                    content : '',
                    closeable : true
                }
            }
        });
        var WidgetList = Backbone.Collection.extend({
            url : '/widgets',
            model : Widget
        });
        Widgets = new WidgetList;


        var WidgetView = Backbone.View.extend({
            tagName : 'section',
            className : function() {
                return ['widget',' ', this.model.get('name')].join('');
            },
    template: _.template($('#widget-template').html()),

            events : {
                "click .close" : "removeWidget"
            },

            initialize : function() {
                this.listenTo(this.model, 'destroy', this.remove);
            },


            removeWidget  : function() {
                this.model.destroy();
            },

            render: function() {
              this.$el.append(this.template(this.model.toJSON()));   
              return this;
            },
        });

        var AppViewport = Backbone.View.extend({
            el : $("#widgets"),

            events : {
            },

            initialize : function() {
                this.listenTo(Widgets, 'add', this.addNewWidgetView);
            },

            addNewWidgetView : function(widget) {
              var view = new WidgetView({model: widget});
              this.$el.append(view.render().el);
            }
        });

        new AppViewport;

或者，也许，我正在考虑另一个解决方法... 但我浪费了太多时间试图理解这个问题，我只是看不到光！

更新--------------- 18/01 ---------

我做了一些测试，并更改了我的代码：我没有使用下划线模板，而是创建了WidgetViewLayout，并手动完成了所有模板的工作：

            var WidgetView = Backbone.View.extend({
                tagName : 'section',
                className : function() {
                    return ['widget',' ', this.model.get('name')].join('');
                },

                events : {
                    "click .close" : "removeWidget"
                },

                initialize : function() {
                    this.listenTo(this.model, 'destroy', this.remove);
                },


                removeWidget  : function() {
                    this.model.destroy();
                    MenuRouterInstance.navigate('');
                },

                render: function() {
                    var layout_view = new WidgetViewLayout({model: this.model.toJSON()});
                    this.$el.append(layout_view.render().el);   
                    return this;
                }
            });

            var WidgetViewLayout = Backbone.View.extend({
                tagName : 'div',

                render : function() {
                    var title = this.model.title,
                        content = this.model.content,
                        closeable = this.model.closeable || false;

                    var anchor = this.setupAnchor(closeable),
                        h1 = this.setupH1(title, anchor),
                        article = this.setupArticle(content);

                    this.$el.append(h1);
                    this.$el.append(article);

                    return this;
                },

                setupH1 : function(title, target) {
                    var element = $('<h1 />');
                    element.text(title);
                    element.append(target);   

                    return element;
                },

                setupAnchor : function(closeable) {
                    var element = '';
                    if(closeable == true) {
                        element = $('<a />'); 
                        element.addClass('close');
                        element.text('(fechar)');
                    }

                    return element;
                },

                setupArticle : function(content) {
                    var element = $('<article />');
                    element.append(content);

                    return element;
                }
            })

现在似乎工作了，但我的Widget里面创建的视图仍然存在一些问题，如：

                    var view = new MyView;                  
                    Widgets.create({
                        name : 'menu',
                        title: 'My menu', 
                        content: view.render().el
                    });

当MyView在其自身内部创建多个SubView时，我调用model.destroy来删除Subview的一个模型，侦听方法“this.remove”最终删除所有SubView，而不是仅删除一个。最后，我被迫这样做：

                removeit : function(removed_item) {
                    if(removed_item.get('name') == this.model.get('name')) {
                        this.remove();                            
                    }
                },

我不知道它是否是一个糟糕的模式，但它已经奏效了！如果有人有更好的主意，我感激不尽！

] [`，S

Answer 1

我认为您的问题是您尝试将DOM元素对象（el）视为字符串。当你这样做时：

content: view.render().el

您将在content中拥有一个实时DOM节点，并且视图的事件将绑定到该DOM节点。您可以使用其中一种HTML方法（在您的情况下显然为outerHTML）通过模板获取节点的HTML，但处理事件的delegate绑定到DOM节点，而不是HTML字符串你最终合作了。

你可以修改你的render以便在必要时按原样使用原始DOM节点，就像这样。

render: function() {
    var json = this.model.toJSON();
    if(_(json.content).isString()) {
        this.$el.append(this.template(json));
    }
    else {
        var content = json.content;
        delete json.content;
        this.$el.append(this.template(json));
        this.$('article').append(content);
    }
}

基本上，如果您的content不是字符串，请手动输入$el，而不是通过模板。

Backbone：使用_.template中的视图

1 个答案: