从视图中要显示的文字获取对象！骨干工程的插件 [英] Get object from view to display in text! plugin of backbone project
问题描述
我想在标签中显示客户的销售历史。
当客户第一次点击中历史记录选项卡，将数据从浏览器的本地存储，显示等明智的，如果客户搜索任何特定的信息，数据将得到来自JSON数据的形式Web服务（REST）。
CustomerView.js
定义（[jQuery的
下划线，
骨干，
的文字！模板/客户/ profile.html
的文字！模板/报价/ sale.html
报价
]函数（$，_，骨干，CustomerProfile，SaleHistory，报价）{
VAR saleHistory =新报价（）;
VAR CustomerView = Backbone.View.extend（{
初始化：功能（）{
}，
EL：#container的
事件：{
点击#searchSaleHistoryButton'：'searchSaleHistory
}，
searchSaleHistory'：功能（）{
变种saleHistoryObj = saleHistory.getSaleHistoryByID（'877-04'）;
}，
渲染：功能（）{
VAR customerProfile = _.template（CustomerProfile）;
$（this.el）的.html（customerProfile）;
}
}）;
返回CustomerView;
}）;
我想获得 saleHistoryObj 在 sale.html 显示模板，而不是历史对象从本地存储上 searchSaleHistoryButton ，每当用户点击。
任何建议将是AP preciated。谢谢你。
sale.html
＆LT;％
VAR历史= localStorage.getItem（SaleHistory）;
VAR historyLength = history.HistoryData.length;
如果（historyLength大于0）{
％GT;
＆LT;表类=defaultHisTbl＆GT;
＆LT;％为（VAR I = 0; I＆LT; historyLength;我++）{％GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;％= history.HistoryData [I] .QuotationNumber％GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;％= history.HistoryData [I] .InvoiceNumber％GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;％= history.HistoryData [I] .QuotationDate％GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT;％}％GT;
＆LT; /表＆gt;
＆LT;％}％GT;
建议您使用Backbone.Model和Backbone.Collection？
让我们期待模型集合是这样的：
VAR profileModel = Backbone.Model.extend（{
默认值：{
QuotationNumber：0，
InvoiceNumber：0，
QuotationDate：'00 -00-00'
}
}）;VAR profileCollection = Backbone.Collection.extend（{
型号：profileModel
}）;
然后让更新的看法：
VAR profileItemView = Backbone.View.extend（{
标签：'TR'，
模板：_.template（CustomerProfile）
渲染：功能（）{
这$ el.html（this.template（this.model.toJSON（）））;
}
}）;VAR profileCollectionView = Backbone.View.extend（{
标签名：'表'，
渲染：功能（）{
this.collection.each（函数（配置文件）{
VAR ItemView控件=新PersonView（{模式：个人资料}）;
这$ el.append（itemView.render（）EL）;
}， 这个）;
}
}）;
然后可以更新模板。预计CustomerProfile为
＆LT; TD＆GT;＆LT;％= QuotationNumber％GT;＆LT; / TD＆GT;
＆所述; TD＆GT;＆下;％= InvoiceNumber％GT;＆下; / TD＆GT;
＆所述; TD＆GT;＆下;％= QuotationDate％GT;＆下; / TD＆GT;
强烈建议你结帐<一个href=\"http://www.$c$cbeerstartups.com/2012/12/9-collection-views-in-backbone-js-learning-backbone-js\"相对=nofollow>这个帖子它非常有用，在表视图渲染的收藏情况。
因此，要达到你的目标，你应该听上profileCollectionView点击和localStorage的或从服务器中设置JSON数据集合。您可能需要重写渲染（）方式在异步JSON的情况。您可以使用事件取和复位进行管理：
VAR profileCollectionView = Backbone.View.extend（{
标签名：'表'， 初始化：功能（）{
this.collection =新profileCollection（）;
this.collection.on（复位，this.render，这一点）;
this.collection.fetch（{重置：真}）;
}， 事件：{
点击.btn'：'resetCollection
}， resetCollection：功能（）{
变种saleHistoryObj = saleHistory.getSaleHistoryByID（'877-04'）;
this.collection.reset（saleHistoryObj）;
}， 渲染：功能（）{
this.collection.each（函数（配置文件）{
VAR ItemView控件=新PersonView（{模式：个人资料}）;
这$ el.append（itemView.render（）EL）;
}， 这个）;
}
}）;//让我们创建一个视图VAR视图=新profileCollectionView（{EL：.some_node'}）;
I am trying to display customer's sale history in a tab. When customer first click in to History tab, the data is displayed from Local Storage of the browser, other wise if the customer search for any specific information, data will gotten from web service(REST) in the form of JSON data.
CustomerView.js
define(["jquery" ,
"underscore" ,
"backbone",
"text!templates/Customer/profile.html",
"text!templates/Quotation/sale.html",
"Quotation"
],function($,_,Backbone,CustomerProfile,SaleHistory,Quotation){
var saleHistory = new Quotation();
var CustomerView = Backbone.View.extend({
initialize: function() {
},
el : "#container",
events : {
'click #searchSaleHistoryButton' : 'searchSaleHistory'
},
'searchSaleHistory' : function(){
var saleHistoryObj = saleHistory.getSaleHistoryByID('877-04');
},
render: function(){
var customerProfile = _.template(CustomerProfile);
$(this.el).html(customerProfile);
}
});
return CustomerView;
});
I want to get saleHistoryObj to display in sale.html template instead of history object get from Local Storage, whenever user click on searchSaleHistoryButton.
Any suggestions would be appreciated. Thanks.
sale.html
<%
var history = localStorage.getItem("SaleHistory");
var historyLength = history.HistoryData.length;
if(historyLength > 0){
%>
<table class="defaultHisTbl">
<% for(var i = 0; i < historyLength; i++){ %>
<tr>
<td><%= history.HistoryData[i].QuotationNumber%></td>
<td><%= history.HistoryData[i].InvoiceNumber%></td>
<td><%= history.HistoryData[i].QuotationDate%></td>
</tr>
<% } %>
</table>
<% } %>
Recommend you to use Backbone.Model and Backbone.Collection?
Lets expect Model and Collection like this:
var profileModel = Backbone.Model.extend({
defaults: {
QuotationNumber: 0,
InvoiceNumber: 0,
QuotationDate: '00-00-00'
}
});
var profileCollection = Backbone.Collection.extend({
model: profileModel
});
Then lets update the views:
var profileItemView = Backbone.View.extend({
tag: 'tr',
template: _.template(CustomerProfile),
render: function(){
this.$el.html( this.template(this.model.toJSON()));
}
});
var profileCollectionView = Backbone.View.extend({
tagName: 'table',
render: function(){
this.collection.each(function(profile){
var itemView = new PersonView({ model: profile });
this.$el.append(itemView.render().el);
}, this);
}
});
Then lets update the template. Expect CustomerProfile as
<td><%= QuotationNumber %></td>
<td><%= InvoiceNumber %></td>
<td><%= QuotationDate %></td>
Highly recommend you to checkout this post its very useful in case of rendering collections in table view.
So to reach you goal you should listen the click on profileCollectionView and set data to collection from localStorage or from server json. You may need to override render() method in case of async json. You can use events 'fetch' and 'reset' to manage it:
var profileCollectionView = Backbone.View.extend({
tagName: 'table',
initialize: function(){
this.collection = new profileCollection();
this.collection.on('reset', this.render, this);
this.collection.fetch({reset: true});
},
events : {
'click .btn' : 'resetCollection'
},
resetCollection : function(){
var saleHistoryObj = saleHistory.getSaleHistoryByID('877-04');
this.collection.reset(saleHistoryObj);
},
render: function(){
this.collection.each(function(profile){
var itemView = new PersonView({ model: profile });
this.$el.append(itemView.render().el);
}, this);
}
});
// lets create a view
var view = new profileCollectionView({ el : '.some_node' });
这篇关于从视图中要显示的文字获取对象！骨干工程的插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
