Question

我是Backbone.js的新手。我正在使用集合构造函数来传递数据并在视图中显示（var salecollection = new SaleCollection([{QuotationID: 2,QuotationNumber:'222'},{QuotationID:3,QuotationNumber:'333'}]);）。

现在我想显示来自localStorage的数据，而不是从集合构造函数中获取数据。

LocalStorage数据由其他功能设置，而不是骨干技术。通过（window.localStorage.setItem）。

任何想法，例子都会欣赏。感谢。

SaleView.js

define(["jquery" ,
   "underscore" ,
   "backbone" ,
   "models/SaleModel",
   "text!templates/Quotation/saleTemplate.html",
   "collections/SaleCollection"
],function($ , _ , Backbone , saleModel,saleTemplate, SaleCollection){
    var saleView = Backbone.View.extend({
      initialize: function() {
        this.render();
      },
      tagName: '<tr>',
      render: function(){
        var sale = _.template(saleTemplate);
        this.$el.html(sale((this.model.toJSON())));
      }
    });
    return saleView;
});

SaleCollectionView.js

define(["jquery" ,
        "underscore" ,
        "backbone",
        "views/Sale",
        "collections/SaleCollection",
        "models/SaleModel",
],function($, _, Backbone, SaleView, SaleCollection, SaleModel){
    var saleCollectionView = Backbone.View.extend({
      tagName: 'table',
      render: function(){
        this.collection.each(function(sale){
            var saleView = new SaleView({ model: sale });
            this.$el.append(saleView.el);
        }, this);
      }
    });
    return saleCollectionView;
});

SaleModel.js

define(["underscore" , "backbone"],function(_ , Backbone){
  var saleModel = Backbone.Model.extend({
    defaults : {
        QuotationID  : "1",
        QuotationNumber : "111"
    }
  });
  return saleModel;
});

SaleCollection.js

define(["underscore",
  "backbone",
  "models/SaleModel"
],function(_, Backbone,saleModel){
  var saleCollection = Backbone.Collection.extend({
    model : saleModel,
    url: "http://localhost:/Website"
  });
  return saleCollection;
});

CustomerView.js

define(["jquery" ,
  "underscore" ,
  "backbone",
  "text!templates/Customer/customerTemplate.html",
  "text!templates/Quotation/saleTemplate.html",
  "views/Customer/SaleCollectionView",
  "collections/SaleCollection",
  "views/Customer/SaleView",
  "models/SaleModel"
],function($, _, Backbone, WebConfig, CustomerProfile, Sale, SaleCollectionView, SaleCollection, SaleView, SaleModel){
var CustomerView = Backbone.View.extend({
    initialize: function() {
    },
    el : "#container",
    events : {
        'click #saleTab' : 'sale',
    },
    'sale' : function(){
        var salemodel = new SaleModel();
        var saleview = new SaleView({model : salemodel});

        var salecollection = new SaleCollection([{QuotationID: 2,QuotationNumber:'222'},{QuotationID:3,QuotationNumber:'333'}]);
        var salecollectionview = new SaleCollectionView({ collection: salecollection},{el:'#saleTabDiv'});

        salecollectionview.render();
        $('.containerHis').append(salecollectionview.el);
    }
    render: function(){
        var customerProfile = _.template(CustomerProfile);
        $(this.el).html(customerProfile);
    }
  });
  return CustomerView;
});

saleTemplate.html

<td><%= QuotationID %></td>
<td><%= QuotationNumber %></td>

Answer 1

您可以从任何数据源创建Backbone模型/集合。以下是localStorage的一个示例：

var Book = Backbone.Collection.extend();

var Library = Backbone.Collection.extend({
  model: Book
});

var model = new Book(JSON.parse(localStorage.getItem('book')));
var collection = new Library(JSON.parse(localStorage.getItem('books')));

要保存在localStorage中，您可以这样做：

localStorage.setItem('book', JSON.stringify(Book.toJSON()));
localStorage.setItem('books', JSON.stringify(Library.toJSON()));

我希望这会有所帮助。

Answer 2

虽然我不清楚，但你的确切期望是什么。但我假设以下列方式。

您创建了一个集合，您希望将当前/当前集合存储到localStorage变量中。（要么）您希望在使用sync（）函数将当前/当前集合数据发布到服务器之前将其存储在localStorage中。

您已使用window.localStorage.setItem存储了该集合，如下所示

var bookModel = Backbone.Model.extend({});
var bookCollection = Backbone.Collection.extend({

// Your rest of the functions goes here...
sync: function(method, collection, options)
{
  switch(method)
  {
     case 'create': window.localStorage.setItem('myCurrentCollection' , JSON.stringify(collection));
                   break;
     case 'update': window.localStorage.setItem('myCurrentCollection' , JSON.stringify(collection));
                   break;    
   }

}

});

现在在特定视图中，您想要获取并显示localStorage值。

        <% var collectionValue = window.localStorage.getItem('myCurrentCollection');
         _.each(collectionValue.toJSON(), function(data){  %>
         <td> <% = data.Id %> </td>
         <td> <% = data.name %> </td> 
         <%});%>

         //your parse and show code goes here...

如果我的假设是正确的，希望这可以帮到你。

在骨干中显示localStorage

2 个答案: