在Backbone.js视图中动态设置id和className
在Backbone.js视图中动态设置id和className
提问于 2018-04-11 04:40:02
我正在学习和使用Backbone.js。
我有一个项目模型和相应的项目视图。每个模型实例都有item_class， item_id attributes,，我希望将其作为相应视图的“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({
});我应该如何实现视图，以便视图将转换为：
<div id="id1" class="nice"></div>
<div id="id2" class="sad"> </div>在我见过的大多数例子中，作为一个没有意义的包装器元素，必须在其中手动编写“语义”代码。
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>回答 2
Stack Overflow用户
发布于 2018-04-11 13:36:08
摘要：使用模型数据动态设置视图属性
// 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"
} )
} );现有元素
您的呈现示例表明您有一个正在分配给视图的现有元素，尽管您没有显示视图的实例化。如果是这种情况，并且元素已经在文档中，那么您可能需要这样做(更新el，但不要改变el本身)：
render : function () {
this.$el.html( "Some stuff" );
}生成元素
假设您没有现有的元素，并且允许主干为您生成一个元素。你五月想要做这样的事情(但最好是设计一些东西，这样您的视图就不会对自己之外的任何事情负责)：
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() );
}
} );Stack Overflow用户
发布于 2018-04-11 13:41:30
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');
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008059
复制相关文章
相似问题