marionette.js 与 Backbone 更新 DOM

Question

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

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

木偶示例中的渲染方法

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

主干示例中的渲染方法

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

小提琴示例的链接

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

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

Answer 1

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

Marionette 区域内视图的渲染处理与 Backbone 情况略有不同。

当您渲染 Backbone.View 时 - 您的元素将自己附加到 DOM 的 $('#search-container')，并且在 render 方法中它将使用已附加的元素进行操作，以便您可以看到更改。

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

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

---

为了更深入地理解它，让我们看看负责在 BackboneView 中附加/创建视图的 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;
},

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