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

问题

我有一个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属性。

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

有任何想法吗？

我曾尝试在“木偶”来源和“骨干”来源中进行挖掘，但是到目前为止，我仍无法找到原因。

附录

应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>

最佳答案

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

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

您可以从initialize方法中删除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 }
})

关于backbone.js - 为什么将模型属性添加到我的Backbone.Marionette.ItemView？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11874319/