清除的localStorage和更改视图骨干 [英] Clear localStorage and change the view Backbone
问题描述
哎，所以我使用的骨干localStorage的每一次有人点击搜索按钮我要清除的localStorage的，所以我可以在新的数据只是添加到localStorage的。
此外，试图找出如何再将用户重定向到一个新的视图中的localStorage的被设置成功后回调，我知道有view.remove（），但我不知道如何使用在于回调是视图中还，其中/如何呈现新的视图...
让我们说，新观点浏览量...
下面是code当前搜索视图：
定义（[
jQuery的，
下划线，
'骨干'，
模型/搜索'，
的文字！模板/ search.html'，]函数（$，_，骨干，SearchM，SearchT）{ VAR搜索= Backbone.View.extend（{
型号：SearchM，
EL：$（＃天狼星）， 事件：{
提交#searchMusic'：'搜索'
}，
搜索：功能（E）{
亦即preventDefault（）; //创建模型的新实例
searchM =新SearchM（）; //发布实例的服务器具有以下输入字段
searchM.save（{
频道：此$（'＃槽钢'）VAL（）
周：这个$（'＃周）VAL（）
同期：。这$（'＃年'）VAL（）
过滤：此$（'＃过滤器）VAL（）。
}，{成功：storeMusic}）; //对客户端成功的localStorage存储音乐
功能storeMusic（模型，响应，期权）{
的console.log（'店'）;
//使用键名创建的localStorage的新实例
searchM.localStorage =新Backbone.LocalStorage（音乐）;
clearLocalStorage（）;
saveToLocalStorage（响应）;
};
功能clearLocalStorage（）{
的console.log（'清晰'）;
//删除的localStorage的项目
this.localStorage.clear（）; //弹出中记载的第一个键
searchM.localStorage.records.shift（）; };
功能saveToLocalStorage（响应）{
的console.log（保存）;
searchM.save（{音乐：响应}，{成功：下一页}）;
};
函数下一页（）{
的console.log（'进入下页'）;
searchM.set（'显示器'，真）;
};
}，
渲染：功能（）{ }
}）;
返回搜索;
}）;
容器视图：
定义（[
jQuery的，
下划线，
'骨干'，
意见/搜索'，
的文字！模板/ search.html
]函数（$，_，骨干，SearchV，SearchT）{ VAR集装箱= Backbone.View.extend（{
EL：$（＃天狼星），
渲染：功能（）{
VAR搜索=新SearchV（）;
这$ el.html（SearchT）;
this.listenTo（searchM，'变化：显示，执行console.log（'改变模式））;
} }）;
返回容器;
}）;
下面是模型：
定义（[
下划线，
'骨干'
]，功能（_，骨干）{ VAR搜索= Backbone.Model.extend（{
网址：/音乐，
默认值：{
显示：假的
} }）;
返回搜索;
}）;
----------------编辑混淆低于
这是容器和SearchM（模型），SearchV（视图），SearchT（模板）...
VAR集装箱= Backbone.View.extend（{
EL：$（＃天狼星），
渲染：功能（）{
//模型创建
searchM =新SearchM（）; //视图中创建
VAR搜索=新SearchV（）;
这$ el.html（SearchT）;
}
}）;
返回容器;
}）;
唯一让我从这里拿出模式，但调用此或this.model实际上行不通，因为searchM没有定义和模型不似乎要传递......我 -
这是搜索查看添加了两种方法，以便忽略其他的现在，如果我可以让这些工作，那么一切都可以效仿
VAR搜索= Backbone.View.extend（{ EL：$（＃天狼星）， 事件：{
提交#searchMusic'：'搜索'
}，
搜索：功能（E）{
亦即preventDefault（）; //发布实例的服务器具有以下输入字段
searchM.save（{
频道：此$（'＃槽钢'）VAL（）
周：这个$（'＃周）VAL（）
同期：。这$（'＃年'）VAL（）
过滤：此$（'＃过滤器）VAL（）。
}，{成功：storeMusic（）}）; 函数下一页（）{
的console.log（'进入下页'）;
searchM.set（'显示器'，真）;
this.listenTo（searchM，'变化：显示，执行console.log（'改变模式））;
的console.log（searchM.display）;
};
尝试这种摆脱模型：
searchM.destroy（）;
这基本上等同于我的答案<一个href=\"http://stackoverflow.com/questions/9911588/how-to-clear-the-backbone-localstorage/18967875#18967875\">here,但对于一个单一的模式。
至于视场改变，我会建议增加一个'显示器'或'装'变量的模型，它默认为false，并设置为true，当数据已准备就绪。于是，有观点聆听变化：显示事件，在准备好时触发render（）方法。您可以尽快删除旧的观点，因为你知道数据发生了变化，并与一些装载微调，然后将被新的数据视图替换替换它。
希望这有助于。
困惑的部分：
VAR集装箱= Backbone.View.extend（{
EL：$（＃天狼星），
渲染：功能（）{
//模型创建
searchM =新SearchM（）; //视图中创建
VAR搜索=新SearchV（{模式：searchM}）;
这$ el.html（SearchT）;
}
}）;VAR搜索= Backbone.View.extend（{ EL：$（＃天狼星）， 事件：{
提交#searchMusic'：'搜索'
}，
初始化：功能（）{
this.listenTo（this.model，'变化：显示，this.displayChanged）;
}，
displayChanged：功能（）{
的console.log（'的显示屏发生变化'）;
}，
搜索：功能（E）{
亦即preventDefault（）;
//发布实例的服务器具有以下输入字段
searchM.save（{
频道：此$（'＃槽钢'）VAL（）
周：这个$（'＃周）VAL（）
同期：。这$（'＃年'）VAL（）
过滤：此$（'＃过滤器）VAL（）。
}，{成功：storeMusic（）}）;
}，
下一页：函数（）{
的console.log（'进入下页'）;
searchM.set（'显示器'，真）;
的console.log（searchM.display）;
}，
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.
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...
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;
});
Container view:
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;
});
Here is the model:
define([
'underscore',
'backbone'
], function(_, Backbone) {
var Search = Backbone.Model.extend({
url: '/music',
defaults: {
display: false
}
});
return Search;
});
----------------EDIT Confused with below
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 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);
};
Try this to get rid of the model:
searchM.destroy();
That's basically the same as in my answer here, but for a single model.
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.
Confused parts:
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和更改视图骨干的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
