gpt4 book ai didi

html - Backbone.js 链接模型和 View

转载 作者:搜寻专家 更新时间:2023-10-31 02:25:15 24 4
gpt4 key购买 nike

我有一张这样的 table

<table>
<tr id="row-one" class="item-row">
<td class="price"></td>
<td><input type="text" class="quantity" value="" /></td>
</tr>
<tr id="row-two" class="item-row">
<td class="price"></td>
<td><input type="text" class="quantity" value="" /></td>
</tr>
<tr id="subtotal">
<td id="subtotal"></td>
<td id="subquantity"></td>
</tr>
</table>

我正在操纵这个 Backbone js 代码

<script type="text/javascript">
jQuery(document).ready(function($){
var Item = Backbone.Model.extend({
initialize: function(){
},
defaults: {
price: 0,
quantity: 0
}
});
var ItemsCollection = Backbone.Collection.extend({
model : Item,
subquantity: function(){
subquantity = 0;
this.each(function(item){
subquantity += item.get('quantity');
});
return subquantity;
}
});
var ItemView = Backbone.View.extend({
events: {
"change .quantity": "updateQuantity"
},
render: function(){
alert('render');
},
updateQuantity: function(){
this.model.set({quantity: this.$('.quantity').val()});
console.log(this.model.get('quantity'));
}
});
var totals = new ItemsCollection();
var item_one = new Item({ price:1,quantity:10 });
var item_two = new Item({ price:1,quantity:20 });
totals.add(item_one);
totals.add(item_two);
var view_one = new ItemView({model:item_one,el:'.item-row'});
})
</script>

我的问题是。

1) 到目前为止,我可以管理一行,这很好。但后来我想管理第二行。我是否只是实例化 ItemView 的另一个实例?或者我可以使用一个 ItemView 实例来管理多个 Models 吗?或者更好的是,使用 Collection

2) 我正在使用 Collection 来管理小计和子数量。我是否创建一个单独的 View 来管理 DOM 中的这些字段?或者我应该只在集合中更新它们?

如果有人有任何其他提示,我很乐意听到。这是我第一次使用 backbone,所以我只想要尽可能多的信息。谢谢!

最佳答案

与大多数 Backbone 问题一样,对此没有“正确”答案 - 您需要找出最适合您的方法,这在一定程度上取决于您的应用程序可能变得多复杂.

在您的设置中对我来说最奇怪的主要事情是您对表格进行了硬编码以列出两个项目 - 我的猜测是,如果您开始使用 Backbone,您可能会拉一个通过 AJAX 从服务器获取项目列表,然后用该列表填充表格。在这种情况下,通常您实际上会为 ItemView 类中的每一行创建 DOM:

var ItemView = Backbone.View.extend({
// there are many different ways to do this, here's one
tagName: 'tr',
className: 'item-row',
// make an Underscore template for the inner HTML
template: _.template(
'<td class="price"><%= price %></td>' +
'<td><input type="text" class="quantity" value="<%= quantity %>" /></td>'
),
render: function(){
// this.el is already set to a tr.item-row DOM element
$(this.el).html(
// fill in the template with model attributes
this.template(this.model.toJSON())
);
// allows chaining
return this;
}
// ... now your events and handler as written
});

这为您提供了一个 ItemView,当您调用 .render() 时,它会呈现您要插入的呈现元素。根据您的设置,您可以在 initialize() 函数中立即调用 this.render(),或者您可以异步获取更多数据然后调用 render () 在回调中。无论哪种方式,您都有一个 View 实例绑定(bind)到一个 模型。为了管理多个模型,我可能有另一个 View 类来保存集合,它将负责实例化子 ItemView 实例:

var ItemsView = Backbone.View.extend({
el: '#myTable',
render: function() {
var tableView = this;
// instantiate and render children
this.collection.each(function(item) {
var itemView = new ItemView({ model: item });
$(tableView.el).append(itemView.render().el);
});
}
});

然后在代码的主体中,您需要做的就是将集合传递给父 View 并进行渲染:

var tableView = new ItemsView({ collection: totals });

这里还有很多要添加的内容,其中大部分处理从服务器异步获取、呈现和刷新数据,但希望这能让您对该方法有一个基本的了解。然而,我要再次强调,这只是做事的一种方式 - 例如,您可以仅使用 ItemsView 类构建同一个应用程序,让它负责呈现所有项目本身.但是,使用一个 View 来管理集合加上 subview 来管理模型的方法可以很好地将事情分开,并有助于在您的应用变大时将复杂性降至最低。

关于html - Backbone.js 链接模型和 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7689843/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com