3

问题

我有一个 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 呈现,它呈现没有表现出这种行为并且根本不将它们的模型属性添加到它们的 $el 的 ItemView 元素。

有任何想法吗?

我已经尝试在 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>
4

1 回答 1

5

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

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

您可以从 initialize 方法中删除this.model = model代码 - 当您在构造函数中指定模型选项时,Backbone 会为您设置此代码。

您的视图元素具有附加属性的原因model.attributes是被设置为视图的可选attributes参数element渲染时添加属性。要正确使用它,您将实例化如下:

var myView = new MyView({
    model: someBackboneModel,
    attributes: { id: ..., class: ..., data-foo: bar }
})
于 2012-10-27T22:11:52.327 回答