[英]Inputs clearing issue
I have a backbone.js app where I have three views (two of them are subviews) 我有一个backbone.js应用程序,我有三个视图(其中两个是子视图)
I put a simplified version of the app here: 我在这里放了一个简化版的应用程序:
http://jsfiddle.net/GS58G/ http://jsfiddle.net/GS58G/
The problem is if I create a Product (which defaults to a Book
subview), and enter in "A Good Book", then click "Add Product", the "A Good Book" is cleared. 问题是如果我创建了一个产品(默认为
Book
子视图),并输入“A Good Book”,然后单击“Add Product”,则清除“A Good Book”。 How do I fix this so it saves the "A Good Book" when you add another product? 如何修复此问题,以便在添加其他产品时保存“好书”?
My subviews for the product book, magazine, and video look like: 我对产品书,杂志和视频的子视图如下:
var ProductBookView = Backbone.View.extend({
render: function () {
this.$el.html( $("#product_book_template").html() );
}
});
var ProductVideoView = Backbone.View.extend({
render: function () {
this.$el.html( $("#product_video_template").html() );
}
});
var ProductMagazineView = Backbone.View.extend({
render: function () {
this.$el.html( $("#product_magazine_template").html() );
}
});
I've forked your jsfiddle and updated it. 我已经分叉你的jsfiddle并更新它。 Here is the working jsfiddle .
这是工作的jsfiddle 。
Issue is in this statement: 问题出在本声明中:
var productBookView = new ProductBookView({
el: $('.product-view')
});
You need to update it with: 你需要更新它:
var productBookView = new ProductBookView({
el: $('.product-view:last')
});
Reason is, the el
element of ProductBookView
should be last .product-view
. 原因是,
ProductBookView
的el
元素应该是最后的.product-view
。 In the code provided by you el
is assigned all div
elements existing in the DOM having class by name product-view
. 在您所提供的代码
el
分配所有div
现有的由名上课的DOM元素product-view
。 Hence every time you add a new product, all div elements with class name product-view
is updated with product_book_template
html. 因此,每次添加新产品时,所有具有类名称
product-view
div元素都将使用product_book_template
html进行更新。 Hence the input box gets cleared off. 因此输入框被清除。
you have to use template .. 你必须使用模板..
...
...
my_template: _.template($("#store_template").html()),
initialize: function() {
this.render();
},
events: {
"click #addProduct": "addProduct"
},
render: function() {
this.$el.html( this.my_template() );
},
....
..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.