Question

我对动态加载视图元素上的el标记有疑问。我将一个点击监听器附加到<a>标签，它将动态加载视图元素（从模板渲染它，通过ajax填充一些内容等）。现在我已经实现了如下：

MyDynamicView = Backbone.View.extend({
    el: "a#dynamic-launcher",
    events: {
        "click": "launch"
    },
    initialize: function(){
        _.bindAll(this, "render");
    },
    launch: function(e){
        e.preventDefault();
        this.render();
    },
    render: function(){
                    // do template/ajax/whatever.
    }
});

哪种方法效果相当好，但它确实阻止我做一些事情。例如，如果我想添加另一个事件，这是由我的新动态视图中的内容触发的，我无法做到这一点（因为事件只在父el下面看。）

所以另一种选择可能是拥有一个父视图，它知道什么元素启动动态元素，然后创建/渲染它。

velo.AppView = Backbone.View.extend({
    el: "body",
    events: {
        "click a#dynamic-launcher": "launchDynamicView"
    },
    launchDynamicView: function(e){
        e.preventDefault();
        new MyDynamicView(); // Or something - Maybe I need to call render.  Not sure.
    }
});

第二种技术是否更有意义？

任何指导都会很棒！

感谢。

Answer 1

最简单的解决方案是

MyDynamicView = Backbone.View.extend({
    el: "div",
    events: {
        "click a#dynamic launcher": "launch"
    },
    initialize: function(){
        _.bindAll(this, "render");
        el.append($("<a></a>", {
            id: "#dynamic-launcher"
        }));
    },
    launch: function(e){
        e.preventDefault();
        this.render();
    },
    render: function(){
        // render link again?
        // do template/ajax/whatever.
    }
});

您的观点应该包含链接，而不是链接。

Answer 2

您似乎没有按预期使用主干视图。您将事件绑定到＃dynamic-launcher，但此元素不是定义此事件绑定的视图的一部分。您对AppView的第二次尝试更好。

当然，实施取决于您的应用的目标，但也许这就是您需要的东西：

初始启动html页面骨架：

<html>
      <head><!-- include your javascript --></head>
      <body></body>
</html>

应用视图

AppView
     events: {
         "click a#dynamiclauncher" : "launch"
     }
     render: function(){
        $('body').html $(el).html(this.template())
     }
     launch: function(){
        $(el).find('.dynamic-view-location').html new DynamicView.render().el
     }

相应的AppTemplate

<p>
   Hello world
   <a id="dynamic-launcher">Launch Dynamic View</a>
   <div class=".dynamic-view-location"></div>
</p>

动态视图

DynamicView
    render: function(){
        $(this.el).html(this.template())
    }

相应的动态视图模板

backbone js - 动态加载视图：应该是启动器，还是应该由父视图启动？

2 个答案: