1

我试图创建一个动态小部件系统来在我的页面内创建面板。让我们举一个例子：

                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

4

1 回答 1

3

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

content: view.render().el

您将拥有一个实时 DOM 节点，content并且视图的事件将绑定到该 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而不是通过模板。

于 2013-01-16T03:15:49.777 回答