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

我有一个关于动态加载视图元素上的el标签的问题。我将一个点击侦听器附加到一个<a>标签上，该标签将动态加载视图元素（从模板渲染它，通过ajax填充某些内容等）。现在，如下我目前已经实现了它：backbone js - 动态加载视图：应该是启动器，还是应该由父视图启动？

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. 
    } 
});

这第二种技术更有意义吗？

任何指导将是伟大的！

谢谢。

来源

2011-05-24 idbentley

最简单的解决办法是让

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. 
    } 
});

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

来源

2011-05-24 20:14:56 Raynos

这不是我要找的，但 - 这将启动视图可以从页面完全不同的部分链接观点最终呈现的是什么。该链接应该在呈现视图之前呈现。 – idbentley 2011-05-24 20:26:27

@idbentley啊。然后你需要附加某种'Controller'来连接链接/按钮，并在某个地方生成一个新的'View'对象。感觉像一个'View' - >'Controller' - >'View'关系，而不是'ParentView' - >'ChildView' – Raynos 2011-05-24 20:31:59

您似乎没有按照预期使用主干视图。你将一个事件绑定到一个＃动态启动器，但是这个元素不是定义这个事件绑定的视图的一部分。你对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()) 
    }

相应的动态视图模板

来源

2011-05-25 21:15:04 34m0

这基本上就是我在第二种情况下做的，除了我想从动态视图构建发布时间的模板，而不是渲染时间。我还要指出，你可以使用'this。$（'selector'）'来选择相对于当前视图（而不是'$（el）.find（selector）'。我同意这比我最初提出的更正确，但我没有看到它为我的第二个提案增加了什么。 – idbentley 2011-05-25 21:25:31

AppView的启动时间是动态视图的渲染时间。直到该链接被点击后，才会生成动态视图的html！ – 34m0 2011-05-25 21:37:06

感谢您对此提示。$（'selector'）。将来会用到这个！ – 34m0 2011-05-25 21:46:58

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

回答

相关问题