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

Question

问题

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

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

示例场景

我的代码的简化示例如下：

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 属性替换。

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

有什么想法吗？

我尝试在 Marionette Source 和 Backbone 源中进行挖掘，但到目前为止我找不到发生这种情况的原因。

附录

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

观点：

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

问题是如何在实例化时将模型传递到视图中。您应该像这样实例化视图：

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

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

您的视图元素具有附加属性的原因是model.attributes 被设置为您的视图的optional attributes parameter。当您的element 被渲染时，这些属性就会被添加。要正确使用它，您可以像这样实例化：

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