backbone.js - 为什么模型属性会添加到我的 Backbone.Marionette.ItemView 中？

Question

问题

我有一个 itemview，它通过它的初始化器接收一个模型。当 itemview 被渲染时，属性被添加到每个模型属性的 View 元素中。

为什么会发生这种情况，我该如何预防？

示例场景

我的代码的简化示例如下所示:

var MyView = Marionette.ItemView.extend({
  tagName: 'div',
  id: 'myView',
  className: 'myClass',
  template: someTemplate,

  initialize: function(model) {
    this.model = model;
  }
});
var myView = new MyView(someBackboneModel);
myView.render();

假设模型有一个值为“124”的“id”属性，这会产生如下元素:

<div id="124" foo="foo" bar="bar" class="myClass">
  <!-- blabla -->
</div>

问题

如您所见，MyView 类中设置的 id 值被模型的 id 属性替换。

我的应用程序中还有其他 ItemView，它们由 Backbone.Marionette.CollectionView 呈现，它呈现 ItemView 元素，这些元素不表现出这种行为并且根本不将它们的模型属性添加到它们的 $el。

有什么想法吗？

我已经尝试在 Marionette 源和 Backbone 源中挖掘，但到目前为止我找不到为什么会这样。

附录

应 Derick Bailey 的要求，这是导致我出现此问题的完整 View 和模板:

View :

var Admin_Applications_ApplicationReader_Application_View = Marionette.ItemView.extend({
  tagName: "div",
  id: "Admin-Applications-ApplicationReader-Application-View",
  template: ApplicationTemplate,
  templateHelpers: {
    moment: Moment
  },

  initialize: function(model) {
    this.model = model;
    this.bindTo(this, 'layout', this.onLayout);
  },

  // Callbacks
  //----------
  onRender: function() {
    var that = this;
    setTimeout(function() {
      that.onLayout();
      var $scrollContainer = that.$el.find('#Admin-Applications-ApplicationReader-Body'), 
          scrollPane = new ScrollPane($scrollContainer, {
            maxHeightProperty: 'maxHeight',
            scrollUpButton: false,
            scrollDownButton: false
          });
    }, 0);
  },

  // Layout
  //-------
  onLayout: function() {
    var css;

    // Calculate desktop styles
    if ($(window).width() > 767) {
      css = this.calculateBodyStyle();
    }
    else {
      css = {
        applicationBody: { height: 'auto' }
      }
    }

    // apply styles
    this.$el.find('#Admin-Applications-ApplicationReader-Body').css(css.applicationBody);

    // re-initialize scroll-pane
    this.$el.find('.scroll-container').trigger('scroll-pane:new-content');
  },
  calculateBodyStyle: function() {
    var $title = this.$el.find('#Admin-Applications-ApplicationReader-Title'),
        viewHeight = this.$el.height(),
        titleHeight = $title.outerHeight(true),
        bodyHeight = viewHeight - titleHeight,
        css = {
          applicationBody: { maxHeight: bodyHeight },
        };

    return css;
  }
});

模板:

<div id="Admin-Applications-ApplicationReader-Title" class="page-header no-top-margin">
  <h2>Application&nbsp;
    <span class="no-wrap"><small>Package: <%= package %>,&nbsp;</small></span> 
    <span class="no-wrap"><small><%= moment(submission_timestamp, 'YYYY-MM-DD HH:mm:ss').fromNow() %></small></span>
  </h2>
</div>

<div id="Admin-Applications-ApplicationReader-Body" class="container-white scroll-container">
  <ul class="application unstyled scroll-content">
    <li class="section summary-section">
      <div class="section-header">
        <h3>Summary</h3>
      </div>

      <table class="section-body no-border table-condensed">
        <tbody>
          <tr>
            <th>Package:</th>
            <td><%= package %></td>
          </tr>
          <tr>
            <th>Date of last flight:</th>
            <td><%= date_of_last_flight %></td>
          </tr>
          <tr>
            <th>Date of renewel:</th>
            <td><%= date_of_ir_renewel %></td>
          </tr>
        </tbody>
      </table>
    </li>
    <!-- /.summary-section -->

    <li class="section credentials-section">
      <div class="section-header">
        <h3>Credentials</h3>
      </div>

      <table class="section-body no-border table-condensed">
        <tbody>
          <tr>
            <th>Pilot Training Institute:</th>
            <td><%= pilot_training_institute %></td>
          </tr>
          <tr>
            <th>Date of exam:</th>
            <td><%= moment(date_of_exam).format('DD-MM-YYYY') %></td>
          </tr>
          <tr>
            <th>Date of last flight:</th>
            <td><%= moment(date_of_last_flight).format('DD-MM-YYYY') %></td>
          </tr>
          <tr>
            <th>Date of MCC Certificate:</th>
            <td><%= moment(date_of_mcc_certificate).format('DD-MM-YYYY') %></td>
          </tr>
          <tr>
            <th>Date of renewel:</th>
            <td><%= moment(date_of_ir_renewel).format('DD-MM-YYYY') %></td>
          </tr>
        </tbody>
      </table>
    </li>
    <!-- /.credentials-section -->

    <li class="section personal-information-section">
      <div class="section-header">
        <h3>Personal information</h3>
      </div>

      <table class="section-body no-border table-condensed">
        <tbody>
          <tr>
            <th>Name:</th>
            <td><%= [first_name, last_name].join(' ') %></td>
          </tr>
          <tr>
            <th>Adress:</th>
            <td><%= address %></td>
          </tr>
          <tr>
            <th>Zip code:</th>
            <td><%= zip_code %></td>
          </tr>
          <tr>
            <th>City:</th>
            <td><%= city %></td>
          </tr>
          <tr>
            <th>Country:</th>
            <td><%= country %></td>
          </tr>
          <tr>
            <th>Language:</th>
            <td><%= language %></td>
          </tr>
          <tr>
            <th>Telephone:</th>
            <td><%= telephone %></td>
          </tr>
          <tr>
            <th>Celĺphone:</th>
            <td><%= cell_phone %></td>
          </tr>
          <tr>
            <th>E-mail:</th>
            <td><%= email %></td>
          </tr>
          <tr>
            <th>Date of birth:</th>
            <td><%= moment(date_of_birth).format('DD-MM-YYYY') %></td>
          </tr>
        </tbody>
      </table>        
    </li>
    <!-- /.personal-information-section -->
  </ul>
  <!-- /.application.scroll-content -->
</div>

Answer 1

问题在于您如何在实例化时将模型传递到 View 中。您应该像这样实例化 View :

var myView = new MyView({model: someBackboneModel});

并且您可以从初始化方法中删除 this.model = model 代码——当您指定一个 model option in the constructor 时，Backbone 会为您设置它。 .

您的 View 元素具有附加属性的原因是 model.attributes 被设置为 optional attributes parameter你的看法。当呈现您的 元素 时，将添加这些属性。要正确使用它，您可以像这样实例化:

var myView = new MyView({
    model: someBackboneModel,
    attributes: { id: ..., class: ..., data-foo: bar }
})