清除 localStorage 并更改视图 Backbone [英] Clear localStorage and change the view Backbone
问题描述
嘿，所以我使用骨干本地存储，每次有人点击搜索按钮时，我都想清除本地存储，这样我就可以将新数据添加到本地存储.
Hey so I am using backbone localstorage and every time someone hits the search button I want to clear the localstorage so I can just add the new data to the localStorage.
此外，试图弄清楚如何在为 localstorage 设置成功回调后将用户重定向到新视图，我知道有 view.remove() 但我不确定如何使用它回调在视图中，以及在何处/如何呈现新视图...
Also, trying to figure out how to then redirect the user to a new view after the success callback in for the localstorage being set, I know there is view.remove() but I am not sure how to use that being that the callback is within the view and also, where/how to render the new view...
假设新视图是 PageView...
Let's say the new view is PageView...
这是当前搜索视图的代码:
Here is the code for the current search view:
define([
'jquery',
'underscore',
'backbone',
'models/search',
'text!templates/search.html',
], function($, _, Backbone, SearchM, SearchT){
var Search = Backbone.View.extend({
model: SearchM,
el: $("#Sirius"),
events: {
'submit #searchMusic': 'search'
},
search: function (e) {
e.preventDefault();
//create new instance of the model
searchM = new SearchM();
//post instance to the server with the following input fields
searchM.save({
channel: this.$('#channel').val(),
week: this.$('#week').val(),
year: this.$('#year').val(),
filter: this.$('#filter').val()
},{success: storeMusic});
// on success store music on client-side localStorage
function storeMusic (model, response, options) {
console.log('store');
//create new instance of the localStorage with the key name
searchM.localStorage = new Backbone.LocalStorage("music");
clearLocalStorage();
saveToLocalStorage(response);
};
function clearLocalStorage () {
console.log('clear');
//removes the items of the localStorage
this.localStorage.clear();
//pops out the first key in the records
searchM.localStorage.records.shift();
};
function saveToLocalStorage (response) {
console.log('save');
searchM.save({music: response}, {success: nextPage});
};
function nextPage () {
console.log('entered next page');
searchM.set('display', true);
};
},
render: function () {
}
});
return Search;
});
容器视图:
define([
'jquery',
'underscore',
'backbone',
'views/search',
'text!templates/search.html'
], function($, _, Backbone, SearchV, SearchT){
var Container = Backbone.View.extend({
el: $("#Sirius"),
render: function () {
var search = new SearchV();
this.$el.html( SearchT );
this.listenTo(searchM, 'change:display', console.log('changed MODEL'));
}
});
return Container;
});
这是模型:
define([
'underscore',
'backbone'
], function(_, Backbone) {
var Search = Backbone.Model.extend({
url: '/music',
defaults: {
display: false
}
});
return Search;
});
----------------编辑与下面混淆
----------------EDIT Confused with below
这是容器和SearchM(model), SearchV(view), SearchT(template)...
This is the container and SearchM(model), SearchV(view), SearchT(template)...
var Container = Backbone.View.extend({
el: $("#Sirius"),
render: function () {
//Model CREATED
searchM = new SearchM();
//VIEW Created
var search = new SearchV();
this.$el.html( SearchT );
}
});
return Container;
});
这是搜索视图 - 所以我从这里取出模型，但是调用 this 或 this.model 实际上不起作用，因为没有定义 searchM 并且模型似乎没有传入......我只添加了这两种方法，所以暂时忽略其余的，如果我可以使这些工作，那么一切都可以效仿
This is the search View - so I took out the model from here, but calling this or this.model actually does not work, as searchM is not defined and the model does not seemed to be passed in... I only added the two methods so ignore the rest for now, if I can make these work then everything can follow suit
var Search = Backbone.View.extend({
el: $("#Sirius"),
events: {
'submit #searchMusic': 'search'
},
search: function (e) {
e.preventDefault();
//post instance to the server with the following input fields
searchM.save({
channel: this.$('#channel').val(),
week: this.$('#week').val(),
year: this.$('#year').val(),
filter: this.$('#filter').val()
},{success: storeMusic()});
function nextPage () {
console.log('entered next page');
searchM.set('display', true);
this.listenTo(searchM, 'change:display', console.log('changed MODEL'));
console.log(searchM.display);
};
推荐答案
试试这个摆脱模型:
searchM.destroy();
这与我在这里的回答基本相同, 但对于单个模型.
That's basically the same as in my answer here, but for a single model.
至于视图更改，我建议向模型添加显示"或加载"变量，默认情况下为 false 并在数据准备好时设置为 true.然后，让视图监听 'change:display' 事件，准备就绪时触发 render() 方法.您可以删除旧视图，一旦您知道数据已更改并用一些加载微调器替换它，然后将被新数据视图替换.希望这有帮助.
As for the view changing, i would recommend adding a 'display' or 'loaded' variable to the model, which is false by default and set to true, when the data is ready. Then, have the view listen to the 'change:display' event, triggering the render() method when ready. You can delete the old view, as soon as you know the data has changed and replace it with some loading spinner, which then will be replaced by the new data view. Hope this helped.
混淆部分:
var Container = Backbone.View.extend({
el: $("#Sirius"),
render: function () {
//Model CREATED
searchM = new SearchM();
//VIEW Created
var search = new SearchV({model: searchM});
this.$el.html( SearchT );
}
});
var Search = Backbone.View.extend({
el: $("#Sirius"),
events: {
'submit #searchMusic': 'search'
},
initialize: function () {
this.listenTo(this.model, 'change:display', this.displayChanged);
},
displayChanged: function () {
console.log('display changed');
},
search: function (e) {
e.preventDefault();
//post instance to the server with the following input fields
searchM.save({
channel: this.$('#channel').val(),
week: this.$('#week').val(),
year: this.$('#year').val(),
filter: this.$('#filter').val()
},{success: storeMusic()});
},
nextPage: function () {
console.log('entered next page');
searchM.set('display', true);
console.log(searchM.display);
},
这篇关于清除 localStorage 并更改视图 Backbone的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
