Question

我正在尝试在标签中显示客户的销售历史记录。当客户首次点击“历史记录”选项卡时，数据将显示在浏览器的“本地存储”中，否则，如果客户搜索任何特定信息，数据将以JSON数据的形式从Web服务（REST）获得。

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;
});

每当用户点击saleHistoryObj时，我希望sale.html显示在history模板而不是searchSaleHistoryButton对象来自本地存储。

任何建议将不胜感激。感谢。

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>
<% } %>

Answer 1

建议您使用Backbone.Model和Backbone.Collection？

让我们期待模特和集合：

var profileModel = Backbone.Model.extend({
    defaults: {
        QuotationNumber: 0,
        InvoiceNumber: 0,
        QuotationDate: '00-00-00' 
    } 
});

var profileCollection = Backbone.Collection.extend({
    model: profileModel
});

然后让我们更新视图：

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);
    }
});

然后让我们更新模板。将CustomerProfile视为

<td><%= QuotationNumber %></td>
<td><%= InvoiceNumber %></td>
<td><%= QuotationDate %></td>

强烈建议您签出this post，以便在表视图中呈现集合时非常有用。

因此，要达到目标，您应该监听profileCollectionView上的点击，并将数据设置为localStorage或服务器json中的集合。在async json的情况下，您可能需要覆盖 render（）方法。您可以使用活动＆＃39; fetch＆＃39;和＆＃39;重置＆＃39;管理它：

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' });

从视图中获取对象以在文本中显示！骨干项目插件

1 个答案: