backbone.js - 使用带有 Backbone Marionette 的现有渲染 HTML 显示 View

Question

我有一个像附加的应用程序布局。上面板已经在页面上(即在服务器的 HTML 响应中)。当用户与该面板中的元素进行交互时，下方动态面板的内容会相应地发生变化。

我研究了 Backbone Marionette 的各种 View 类型和区域管理器。但我仍然想不出实现这一点的方法。我需要从已经呈现的元素中捕获事件并相应地更改动态内容。据我了解，每次创建区域到 show特定的 Marionette View ，该区域的内容将替换为该 View 的 el .有了这个，我就不能拥有 Layout查看整个事物的容器。

那么这可以使用 Marionette 以任何方式完成吗？

Answer 1

您当然可以支持我所说的“预渲染”或部分 View 。事实上，这是一个我经常使用的 Marionette View ，因为我正在使用一个包含服务器端部分 View 的应用程序:

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();