javascript - 在 Backbone.js View 中动态设置 id 和 className

Question

我正在学习和使用 Backbone.js。

我有一个 Item 模型和一个相应的 Item View 。
每个模型实例都有 item_class 和 item_id 属性，我希望将它们反射(reflect)为相应 View 的 'id' 和 'class' 属性。
实现这一目标的正确方法是什么？

示例:

var ItemModel = Backbone.Model.extend({      
});

var item1 = new ItemModel({item_class: "nice", item_id: "id1"});
var item2 = new ItemModel({item_class: "sad", item_id: "id2"});

var ItemView = Backbone.View.extend({       
});

我应该如何实现 View ，以便 View el 将转换为:

<div id="id1" class="nice"></div>
<div id="id2" class="sad"> </div>

在我见过的大多数示例中， View 的 el 充当无意义的包装元素，必须在其中手动编写“语义”代码。

var ItemView = Backbone.View.extend({
   tagName:  "div",   // I know it's the default...

   render: function() {
     $(this.el).html("<div id="id1" class="nice"> Some stuff </div>");
   }       
});

所以当渲染时，一个人得到

<div> <!-- el wrapper -->
    <div id="id1" class="nice"> Some stuff </div>
</div>

但这似乎是一种浪费-为什么要有外部 div ？我要el直接翻译成内部div!

Answer 1

总结:使用模型数据动态设置 View 属性

http://jsfiddle.net/5wd0ma8b/

// View class with `attributes` method
var View = Backbone.View.extend( {
  attributes : function () {
    // Return model data
    return {
      class : this.model.get( 'item_class' ),
      id : this.model.get( 'item_id' )
    };
  }
  // attributes
} );

// Pass model to view constructor
var item = new View( {
  model : new Backbone.Model( {
    item_class : "nice",
    item_id : "id1"
  } )
} );

此示例假定您允许 Backbone 为您生成 DOM 元素。

attributes在设置传递给 View 构造函数的属性(在本例中为 model )之后调用方法，允许您在 Backbone 创建 el 之前使用模型数据动态设置属性.

与其他一些答案相反:不在 View 类中对属性值进行硬编码，而是从模型数据中动态设置它们；不等到render()设置属性值；不会在每次调用 render() 时重复设置 attr vals ;不会在 DOM 元素上不必要地手动设置 attr vals。

注意，如果在调用 Backbone.View.extend 时设置类或 View 构造函数(例如 new Backbone.View )，您必须使用 DOM 属性名称， className ，但如果通过 attributes 设置它散列/方法(如本例中)您必须使用属性名称，class .

从 Backbone 0.9.9 开始:

When declaring a View...el, tagName, id and className may now be defined as functions, if you want their values to be determined at runtime.

我会提到这一点，以防在某些情况下它可以用作使用 attributes 的替代方法。方法如图。

使用现有元素

如果您正在使用现有元素(例如将 el 传递给 View 构造函数)...

var item = new View( { el : some_el } );

...然后 attributes不会应用于元素。如果所需的属性尚未在元素上设置，或者您不想在 View 类和其他位置复制该数据，那么您可能需要添加 initialize应用于 View 构造函数的方法 attributes至 el .像这样(使用 jQuery.attr ):

View.prototype.initialize = function ( options ) {
  this.$el.attr( _.result( this, 'attributes' ) );
};

el的用法, 渲染, 避免包装器

In most examples I have seen, the view's el serves as a meaningless wrapper element inside which one has to manually write the 'semantic' code.

没有理由 view.el需要是“无意义的包装元素”。事实上，这通常会破坏 DOM 结构。如果一个 View 类代表一个 <li>例如元素，它需要呈现为 <li> -- 将其渲染为 <div>或任何其他元素都会破坏内容模型。您可能希望专注于正确设置 View 的元素(使用 tagName 、 className 和 id 等属性)，然后渲染其内容。

如何让 Backbone View 对象与 DOM 交互的选项是非常开放的。有两种基本的初始场景:

您可以将现有的 DOM 元素附加到 Backbone View 。

您可以允许 Backbone 创建一个与文档断开连接的新元素，然后以某种方式将其插入到文档中。

有多种方法可以为元素生成内容(设置文字字符串，如您的示例；使用模板库，如 Mustache、Handlebars 等)。您应该如何使用 el View 的属性取决于你在做什么。

现有元素

您的渲染示例表明您有一个要分配给 View 的现有元素，尽管您没有显示 View 的实例化。如果是这种情况，并且该元素已经在文档中，那么您可能想要执行以下操作(更新 el 的内容，但不要更改 el 本身):

render : function () {
  this.$el.html( "Some stuff" );
}

http://jsfiddle.net/vQMa2/1/

生成元素

假设您没有现有元素，并且您允许 Backbone 为您生成一个。您可能想要做这样的事情(但架构事物可能会更好，以便您的 View 不负责了解自身之外的任何事情):

render : function () {
  this.$el.html( "Some stuff" );
  $( "#some-container" ).append( this.el );
}

http://jsfiddle.net/vQMa2/

模板

就我而言，我正在使用模板，例如:

<div class="player" id="{{id}}">
<input name="name" value="{{name}}" />
<input name="score" value="{{score}}" />
</div>
<!-- .player -->

模板代表完整的 View 。换句话说，模板周围没有包装器—— div.player将是我的 View 的根或最外层元素。

我的播放器类看起来像这样(使用非常简化的 render() 示例):

Backbone.View.extend( {
  tagName : 'div',
  className : 'player',

  attributes : function () {
    return {
      id : "player-" + this.model.cid
    };
  },
  // attributes

  render : function {
    var rendered_template = $( ... );

    // Note that since the top level element in my template (and therefore
    // in `rendered_template`) represents the same element as `this.el`, I'm
    // extracting the content of `rendered_template`'s top level element and
    // replacing the content of `this.el` with that.
    this.$el.empty().append( rendered_template.children() );
  }      
} );