javascript - marionette.js 与 Backbone 更新 DOM

Question

我注意到与 Backbone 相比，Marionette 更新 DOM 的方式有所不同。我创建了两个简单的 fiddle 。一种使用 Backbone，另一种基于 Marionette 。这两个示例都有一个辅助方法调用 processDom，该方法在迭代 50 次后简单地抛出一个错误。

然而，在 backbone 示例元素被附加到 DOM 直到 die() 方法触发。但是在基于 Marionette 的示例中，DOM 根本没有更新。如果有人可以解释这是如何工作的，那就太好了。我想知道 Marionette 在内部使用一种虚拟 dom 技术。

Marionette 示例中的渲染方法

render: function () {
            var viewHtml = this.template({
                'contentPlacement': 'Sydney'
            });
            this.$el.html(viewHtml);
            this.processDom(this.$el);
            this.postRender();
        }

backbone 示例中的渲染方法

render: function () {
        var template = Handlebars.compile($('#sample-template').html());
        var viewHtml = template({
                'contentPlacement': 'Sydney'
            });
        this.$el.html(viewHtml);
        this.processDom(this.$el);
        this.postRender();
    },

fiddle 示例链接

http://jsfiddle.net/samitha/v5L7c2t5/7/

http://jsfiddle.net/samitha/pc2cvmLs/7/

Answer 1

一般出于后期处理目的，您可以使用Marionette.ItemView 的onRender。重写 Marionette.ItemView.render 不是一个好习惯。

Marionette 区域内 View 的渲染处理方式与 Backbone 情况略有不同。

当您呈现 Backbone.View - 您的元素将自身附加到 DOM 的 $('#search-container')，并在 render 中code> 方法，它将与已经附加的元素一起运行，因此您可以看到更改。

当您使用 Marionette.Region.show 方法渲染 Marionette.ItemView 时，Marionette.Region 已经附加到 DOM 并且它需要呈现适当的 View (在您的情况下为 ItemView)，只有在该步骤之后，它才会将其附加到 DOM 并将 ItemView 设置为 currentView。

从source可以看出Marionette.Region.show 在调用 render 后附加 View 。在您的情况下，render 将抛出错误并且它永远不会附加到 DOM。

---

为了更深入地理解它，让我们看一下负责在 BackboneView 中附加/创建 View 的 2 个方法。 Marionette 对 Marionette.ItemView 使用相同的方法。

_ensureElement: function() {
  if (!this.el) { // case when el property not specified in view
    var attrs = _.extend({}, _.result(this, 'attributes'));
    if (this.id) attrs.id = _.result(this, 'id');
    if (this.className) attrs['class'] = _.result(this, 'className');
    // creating new jQuery element(tagNam is div by default) with attributes specified
    var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
    this.setElement($el, false);
  } else {  // case when el property exists
    this.setElement(_.result(this, 'el'), false);
  }
}

和

setElement: function(element, delegate) {
  if (this.$el) this.undelegateEvents();
  // here is all magic
  // if element is instance of Backbone.$, which means that el property not specified
  //  or it's already jquery element like in your example( el: $('#search_container')) with Backbone. 
  // this.$el will be just a jQuery element or already attached to the DOM jQuery element
  // in other case it will try to attach it to the DOM.
  this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
  this.el = this.$el[0];
  if (delegate !== false) this.delegateEvents();
  return this;
},

正如您从评论中看到的那样，所有的魔法都在几行代码中，这就是我喜欢它的原因。