à l'aide de localStorage dans Backbone.js
Je suis en train de réunir un squelette exemple dans lequel les modèles sont créés, modifiés et supprimés. Je suis en mesure d'enregistrer de nouveaux modèles et des modifications pour le stockage local, mais j'ai un problème pour faire le localstorage pour afficher correctement lors de l'actualisation. Il semble être le chargement d'un objet unique, et donc donne moi un modèle, indépendamment de la façon dont beaucoup ont été ajoutés.
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
});
OriginalL'auteur user1469779 | 2012-06-20
Vous devez vous connecter pour publier un commentaire.
Vous devez ajouter les articles à votre collection, puis à le lire, vous devez faire appel à rapporter. Vous avez également quelques virgules dans vos objets.
Voici une version légèrement modifiée de votre code qui semble fonctionner.
Edit: je vois que vous essayez de lire dans la valeur stockée dans le stockage local en vertu de la "banque-nom", la voie dorsale-localStorage œuvres, c'est qu'il utilise le nom de la banque (dans votre cas "Store-nom") pour stocker l'id du reste des modèles, puis enregistre chaque modèle sous une combinaison du nom de la banque et de l'id, donc, disons que vous avez eu trois modèles, vous vous retrouvez avec 4 entrées dans les locaux de stockage,
EDIT 2
Voici un lien vers un jsfiddle de votre code, pour commencer je pars de la ligne
thingsList.fetch();
commentée, décommenter la ligne et commentairethingsList.add(things);
et exécuter une seconde fois et il devrait tirer les modèles de Stockage local (j'ai laissé une alerte).Je pense que votre problème est que vous essayez de lire les données directement à partir de localStorage tort, j'ai mis à jour ma réponse avec un peu plus de détails.
merci Jack, mais cela ne fonctionne toujours pas. Lorsque je change de var storeVar = localStorage.getItem("store-nom-id1"); console.log(storeVar); Elle renvoie null. Est ma syntaxe incorrecte?
J'étais juste en utilisant id1 pour illustrer mon point. La réelle id sont fondées sur l'id est des modèles, ou si il n'y a pas un, alors épine dorsale localStorage va générer un id aléatoire (je pense que c'est quelque chose comme 12 caractères). Vous pouvez voir ce qui est stocké dans localStorage à l'aide de la plupart des navigateur des outils de débogage (par exemple sur google Chrome, Safari ou Opera consulter la rubrique Ressources/LocalStorage).
Je l'ai eu à travailler. Tout ce que je n'ai vraiment était de mettre thingsList.fetch(); thingsList.la méthode toJSON(); dans la fonction d'initialisation de ThingsListView. Je pouvais poster le dernier exemple, mais je veux un crédit de la réponse.
OriginalL'auteur Jack
OriginalL'auteur user1469779