我正在学习和使用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>
发布于 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() );
}
} );
发布于 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');
}
});
https://stackoverflow.com/questions/-100008059
复制相似问题