我有一个像所附的应用程序布局。上面的面板已经到了页面(即在服务器的 HTML 响应中)。当用户与该面板中的元素交互时,下面的动态面板的内容会相应地发生变化。
我研究了 Backbone Marionette 的各种视图类型和区域管理器。但我仍然想不出实现这个的方法。我需要从已渲染的元素中捕获事件并相应地更改动态内容。据我了解,每次创建一个区域时show
特定的 Marionette 视图,该区域的内容将被该视图的内容替换el
。有了这个我就不能拥有Layout
查看整个事物的容器。
那么可以使用 Marionette 来完成此操作吗?
您当然可以支持我所说的“预渲染”或部分视图。事实上,这是我经常使用的 Marionette 视图,因为我正在使用一个包含服务器端部分视图的应用程序:
My.PartialView = Backbone.Marionette.Layout.extend({
render: function () {
//noop
if (this.onRender) {
this.onRender();
}
return this;
},
onShow: function () {
// make sure events are ready
this.delegateEvents();
}
});
使用起来很简单:
My.NavBar = My.PartialView.extend({
events: {
"change #search-input": "searchRequested",
"click #faq-link": "faqRequested",
"click #home-link": "homeRequested",
},
searchRequested: function (e) {
// search
},
faqRequested: function (e) {
// show the faq
},
homeRequested:function () {
// go home
}
});
var navbar = new main.views.NavBar({ el: ".my-nav" });
someRegion.show();
// or, just wire up the events manually
navbar.delegateEvents();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)