在Backbone.js视图中动态设置id和className
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Backbone.js视图中动态设置id和className相关的知识，希望对你有一定的参考价值。
我正在学习和使用Backbone.js。
我有一个Item模型和一个相应的Item视图。每个模型实例都有item_class和item_id属性，我希望将它们反映为相应视图的“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({
});
我应该如何实现视图，以便视图的el将转换为：
<div id="id1" class="nice"></div>
<div id="id2" class="sad"> </div>
在我看到的大多数示例中，视图的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！
Summary: dynamically set view attributes with model data
// 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）之后调用model方法，允许您在Backbone创建el之前使用模型数据动态设置属性。 - 与其他一些答案相反：不对视图类中的属性值进行硬编码，从模型数据中动态设置它们;不要等到
render()设定attr vals;在每次打电话给render()时都不会重复设定attr vals;不必要地在DOM元素上手动设置attr vals。 - 请注意，如果在调用
Backbone.View.extend或视图构造函数（例如new Backbone.View）时设置类，则必须使用DOM属性名称className，但如果通过attributes哈希/方法设置它（如本例所示），则必须使用属性名称，class。 - 截至Backbone 0.9.9：
声明视图时...
el，tagName，id和className现在可以定义为函数，如果您希望在运行时确定它们的值。 我提到这种情况，以防有可能作为替代使用如图所示的attributes方法的情况。
Using an existing element
如果您正在使用现有元素（例如将el传递给视图构造函数）......
var item = new View( { el : some_el } );
...然后attributes将不适用于该元素。如果尚未在元素上设置所需的属性，或者您不想在视图类和其他位置复制该数据，则可能需要将initialize方法添加到将attributes应用于el的视图构造函数中。像这样的东西（使用jQuery.attr）：
View.prototype.initialize = function ( options ) {
this.$el.attr( _.result( this, 'attributes' ) );
};
Usage of el, rendering, avoiding the wrapper
在我看到的大多数示例中，视图的el用作无意义的包装元素，在其中必须手动编写“语义”代码。
view.el没有理由需要成为“无意义的包装元素”。实际上，这通常会打破DOM结构。例如，如果视图类表示<li>元素，则需要将其呈现为<li> - 将其呈现为<div>或任何其他元素将破坏内容模型。您可能希望专注于正确设置视图元素（使用tagName，className和id等属性），然后再渲染其内容。
如何让Backbone视图对象与DOM交互的选项是开放的。有两个基本的初始场景：
- 您可以将现有DOM元素附加到Backbone视图。
- 您可以允许Backbone创建一个与文档断开连接的新元素，然后以某种方式将其插入到文档中。
您可以通过多种方式为元素生成内容（设置文字字符串，如示例中所示;使用模拟库，如Mustache，Handlebars等）。你应该如何使用视图的el属性取决于你正在做什么。
现有元素
您的渲染示例表明您具有要分配给视图的现有元素，尽管您没有显示视图的实例化。如果是这种情况，并且元素已经在文档中，那么您可能想要做这样的事情（更新el的内容，但不要改变el本身）：
render : function () {
this.$el.html( "Some stuff" );
}
生成的元素
假设您没有现有元素，并允许Backbone为您生成一个元素。您可能想要做这样的事情（但是建立事物可能更好，这样您的视图不负责了解自身之外的任何事情）：
render : function () {
this.$el.html( "Some stuff" );
$( "#some-container" ).append( this.el );
}
模板
就我而言，我正在使用模板，例如：
<div class="player" id="{{id}}">
<input name="name" value="{{name}}" />
<input name="score" value="{{score}}" />
</div>
<!-- .player -->
模板表示完整视图。换句话说，模板周围没有包装器--div.player将是我视图的根或最外层元素。
我的播放器类看起来像这样（有一个非常简单的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() );
}
} );
在你看来，做这样的事情
var ItemView = Backbone.View.extend({
tagName: "div", // I know it's the default...
render: function() {
$(this.el).attr('id', 'id1').addClass('nice').html('Some Stuff');
}
});
您可以在根元素上设置属性className和id：http://documentcloud.github.com/backbone/#View-extend
var ItemView = Backbone.View.extend({
tagName: "div", // I know it's the default...
className : 'nice',
id : 'id1',
render: function() {
$(this.el).html("Some stuff");
}
});
编辑包含基于构造函数参数设置id的示例
如果视图的构造如上所述：
var item1 = new ItemModel({item_class: "nice", item_id: "id1"});
var item2 = new ItemModel({item_class: "sad", item_id: "id2"});
然后可以这样设置值：
// ...
className: function(){
return this.options.item_class;
},
id: function(){
return this.options.item_id;
}
// ...
我知道这是一个老问题，但增加了参考。在新的骨干版本中，这似乎更容易。在Backbone 1.1中，使用下划线ensureElement在函数from source（请参阅_.result）中计算id和className属性，这意味着如果className或id是函数，则将调用它，否则将使用其值。
所以你可以直接在构造函数中给出className，给出另一个将在className中使用的参数等等。很多选项
所以这应该工作
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({
id: function() { return this.model.get('item_id'); },
className: function() { return this.model.get('item_class'); }
});
其他示例未显示如何从模型中实际获取数据。要从模型的数据中动态添加id和class：
var ItemView = Backbone.View.extend({
tagName: "div",
render: function() {
this.id = this.model.get('item_id');
this.class = this.model.get('item_class');
$(this.el).attr('id',this.id).addClass(this.class).html('Some Stuff');
}
});
您需要删除tagName并声明el。
'tagName'表示您希望骨干创建元素。如果元素已存在于DOM中，则可以指定以下内容：
el: $('#emotions'),
然后：
render: function() {
$(this.el).append(this.model.toJSON());
}
尝试在initialize方法中分配值，这将直接将id和class动态分配给div属性。
var ItemView = Backbone.View.extend( {
tagName : "div",
id : '',
class : '',
initialize : function( options ) {
if ( ! _.isUndefined( options ) ) {
this.id = options.item_id;
this.class= options.item_class;
}
},
render : function() {
$( this.el ).html( this.template( "stuff goes here" ) );
}
} );
这是通过模型动态更改视图元素类的最小方法，并在模型更改时更新它。
var VMenuTabItem = Backbone.View.extend({
tagName: 'li',
events: {
'click': 'onClick'
},
initialize: function(options) {
// auto render on change of the class.
// Useful if parent view changes this model (e.g. via a collection)
this.listenTo(this.model, 'change:active', this.render);
},
render: function() {
// toggle a class only if the attribute is set.
this.$el.toggleClass('active', Boolean(this.model.get('active')));
this.$el.toggleClass('empty', Boolean(this.model.get('empty')));
return this;
},
onClicked: functi以上是关于在Backbone.js视图中动态设置id和className的主要内容，如果未能解决你的问题，请参考以下文章