Backbone.js

Question

मैं एक साथ डाल रहा हूँ एक रीढ़ उदाहरण है, जिसमें मॉडल संपादित किया है और नष्ट कर दिया बनाई गई हैं में localStorage का उपयोग कर। मैं स्थानीय मॉडलों में नए मॉडल और संपादन को सहेजने में सक्षम हूं, लेकिन रीफ्रेश पर ठीक से प्रदर्शित करने के लिए स्थानीय स्टोरेज प्राप्त करने में समस्या आ रही है। ऐसा लगता है कि एक वस्तु के रूप में लोड हो रहा है, और इसलिए मुझे एक मॉडल देता है चाहे कितने जोड़े गए थे।

var Thing = Backbone.Model.extend({ 
    defaults: { 
     title: 'blank' 
    } 
}); 
var ThingView = Backbone.View.extend({ 
    template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'), 
    editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'), 
    events: { 
     "click #remove": "deleteItem", 
     "click #edit": "editItem", 
     "click #save": "saveItem", 
    }, 
    deleteItem: function() { 
     console.log('deleted'); 
     this.model.destroy(); 
     this.remove(); 
    }, 
    editItem: function() { 
     console.log('editing'); 
     this.$el.html(this.editTemplate(this.model.toJSON())); 
    }, 
    saveItem: function() { 
     console.log('saved'); 
     editTitle = $('input.name').val(); 
     console.log(editTitle); 
     this.model.save({ 
      title: editTitle 
     }); 
     this.$el.html(this.template(this.model.toJSON())); 
    }, 
    render: function() { 
     var attributes = this.model.toJSON(); 
     this.$el.append(this.template(attributes)); 
     return this; 
    } 
}); 
var ThingsList = Backbone.Collection.extend({ 
    model: Thing, 
    localStorage: new Store("store-name"), 
}); 
var storeVar = localStorage.getItem("store-name"); 
console.log(storeVar); 
var thingsList = new ThingsList; 
thingsList.reset(storeVar); 
var ThingsListView = Backbone.View.extend({ 
    el: $('body'), 
    events: { 
     'click #add': 'insertItem', 
    }, 
    initialize: function() { 
     this.render(); 
     this.collection.on("add", this.renderThing, this); 
    }, 
    insertItem: function (e) { 
     newTitle = $('input').val(); 
     newThing = new Thing({ 
      title: newTitle 
     }); 
     this.collection.add(newThing); 
     newThing.save(); 
     console.log(this.collection.length); 
    }, 
    render: function() { 
     _.each(this.collection.models, function (items) { 
      this.renderThing(items); 
     }, this); 
    }, 
    renderThing: function (items) { 
     var thingView = new ThingView({ 
      model: items 
     }); 
     this.$el.append(thingView.render().el); 
    } 
}); 
var thingsListView = new ThingsListView({ 
    collection: thingsList 
}); 

Answer 1

var Thing = Backbone.Model.extend({ 
    defaults: { 
     title: 'blank' 
    } 
}); 
var ThingView = Backbone.View.extend({ 
    template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'), 
    editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'), 
    events: { 
     "click #remove": "deleteItem", 
     "click #edit": "editItem", 
     "click #save": "saveItem", 
    }, 
    deleteItem: function() { 
     console.log('deleted'); 
     this.model.destroy(); 
     this.remove(); 
    }, 
    editItem: function() { 
     console.log('editing'); 
     this.$el.html(this.editTemplate(this.model.toJSON())); 
    }, 
    saveItem: function() { 
     console.log('saved'); 
     editTitle = $('input.name').val(); 
     console.log(editTitle); 
     this.model.save({ 
      title: editTitle 
     }); 
     this.$el.html(this.template(this.model.toJSON())); 
    }, 
    render: function() { 
     var attributes = this.model.toJSON(); 
     this.$el.append(this.template(attributes)); 
     return this; 
    } 
}); 
var ThingsList = Backbone.Collection.extend({ 
    model: Thing, 
    localStorage: new Store("store-name"), 
}); 
var storeVar = localStorage["store-name-7ee7d1e3-bbb7-b3e4-1fe8-124f76c2b64d"]; 
console.log(storeVar); 
var thingsList = new ThingsList; 
//thingsList.reset(storeVar); 
var ThingsListView = Backbone.View.extend({ 
    el: $('body'), 
    events: { 
     'click #add': 'insertItem', 
    }, 
    initialize: function() { 
    thingsList.fetch(); 
    thingsList.toJSON(); 
     this.render(); 
     this.collection.on("add", this.renderThing, this); 
    }, 
    insertItem: function (e) { 
     newTitle = $('input').val(); 
     newThing = new Thing({ 
      title: newTitle 
     }); 
     this.collection.add(newThing); 
     newThing.save(); 
     console.log(this.collection.length); 
    }, 
    render: function() { 
     _.each(this.collection.models, function (items) { 
      this.renderThing(items); 
     }, this); 
    }, 
    renderThing: function (items) { 
     var thingView = new ThingView({ 
      model: items 
     }); 
     this.$el.append(thingView.render().el); 
    } 
}); 
var thingsListView = new ThingsListView({ 
    collection: thingsList 
}); 

Answer 2

आप अपने संग्रह में आइटम जोड़ने की जरूरत है, और फिर इसे पढ़ने के लिए आप लाने के कॉल करने के लिए की जरूरत है। आपके ऑब्जेक्ट्स में आपके पास कुछ अतिरिक्त पिछला कॉमा भी है।

यहाँ जो काम करने के लिए लगता है अपने कोड का एक थोड़ा संशोधित संस्करण है।

var Thing = Backbone.Model.extend({ 
    defaults:{ 
    title:'blank' 
    } 
}); 

var ThingView = Backbone.View.extend({ 
    //el: $('body'), 
    template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'), 
    editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'), 


    events: { 
    "click #remove": "deleteItem",  
    "click #edit": "editItem", 
    "click #save": "saveItem", 
    }, 

    deleteItem: function(){ 
     console.log('deleted'); 

      this.model.destroy(); 
      //remove view from page 
      this.remove(); 
    }, 

    editItem: function(){ 
    console.log('editing'); 
    this.$el.html(this.editTemplate(this.model.toJSON())); 
    }, 

    saveItem: function(){ 
    console.log('saved'); 
    editTitle = $('input.name').val(); 
    console.log(editTitle); 
    this.model.save({title: editTitle}); 
    this.$el.html(this.template(this.model.toJSON())); 
    }, 

    render: function(){ 
     var attributes = this.model.toJSON(); 
     this.$el.append(this.template(attributes)); 
     return this; 
    } 
}); 

var storeVar = localStorage.getItem("store-name"); 

var ThingsList = Backbone.Collection.extend({ 
    model: Thing, 
    localStorage: new Store("store-name") 
}); 

var things = [ 
    { title: "Macbook Air", price: 799 }, 
    { title: "Macbook Pro", price: 999 }, 
    { title: "The new iPad", price: 399 }, 
    { title: "Magic Mouse", price: 50 }, 
    { title: "Cinema Display", price: 799 } 
]; 

console.log(things); 

var thingsList = new ThingsList; 

var ThingsListView = Backbone.View.extend({ 
    el: $('body'), 

events: { 
     'click #add': 'insertItem' 
    }, 

initialize: function() { 
    this.render(); 
    this.collection.on("add", this.renderThing, this); 
    }, 


    insertItem: function(e){ 
     newTitle = $('input').val(); 
     newThing = new Thing({ title: newTitle }); 
     this.collection.add(newThing); 
     newThing.save(); 
     //this.model.saveItem; 
     console.log(this.collection.length); 
    }, 


    render: function(){ 
    _.each(this.collection.models, function (items) { 
      this.renderThing(items); 
     }, this); 
    }, 


    renderThing: function(items) { 
    //console.log('added something'); 
    var thingView = new ThingView({ model: items }); 
     items.save(); 
    this.$el.append(thingView.render().el); 
    } 

}); 

var thingsListView = new ThingsListView({collection: thingsList}); 
thingsList.fetch(); 
console.log(thingsList.toJSON()); 
thingsList.reset(things); 

संपादित करें: मैं देख रहा हूँ के तहत "दुकान का नाम" स्थानीय संग्रहण में संग्रहीत मूल्य में पढ़ने के लिए कोशिश कर रहे हैं, जिस तरह से रीढ़-localStorage काम करता है कि यह (दुकान के नाम का उपयोग करता है अपने मामले "स्टोर-नाम") मॉडल के बाकी के आईडी स्टोर करने के लिए और फिर दुकान का नाम और आईडी का एक संयोजन के तहत प्रत्येक मॉडल की बचत होती है, इसलिए कहते हैं कि तुम तीन मॉडल था, तो आप स्थानीय भंडारण में 4 प्रविष्टियों के साथ खत्म हो जाएगा ,

localStorage["store-name"] //id1, id2, id3" 
    localStorage["store-name-id1"] //model with id1 
    localStorage["store-name-id2"] // model with id2 
    localStorage["store-name-id3"] // model with id3 

संपादित 2

यह आपके कोड के jsfiddle पर एक लिंक है, शुरू करने के लिए, मैं लाइन thingsList.fetch(); को छोड़कर टिप्पणी कर रहा हूं, उस पंक्ति को अनदेखा करता हूं और thingsList.add(things); पर टिप्पणी करता हूं और इसे दूसरी बार चलाता हूं और इसे स्थानीय संग्रहण से मॉडल खींचना चाहिए (मैंने छोड़ा वहां एक चेतावनी)।