Get object from view to display in text! plugin of

Question

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

Answer 1

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