问题

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();

假设模型的'id'属性值为'124'，则会产生如下元素：

<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});

您可以从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 }
})

为什么将Model属性添加到我的Backbone.Marionette.ItemView？

问题

示例场景

问题

有什么想法吗？

附录

视图：

模板：

1 个答案: