清除localStorage并更改Backbone视图
嘿，所以我使用骨干localstorage，每次有人点击搜索按钮我想清除本地存储，所以我可以将新数据添加到localStorage。
此外，试图找出如何在设置localstorage成功回调后将用户重定向到新视图，我知道有view.remove（）但我不知道如何使用回调是在视图内以及在何处/如何呈现新视图…
让我们说新视图是PageView …
以下是当前搜索视图的代码：
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; });
—————-编辑混淆如下
这是容器和SearchM（模型），SearchV（视图），SearchT（模板）……
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并且模型似乎没有传入…我只添加了两个方法所以暂时忽略其余的，如果我可以做这些工作，那么一切都可以效仿
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();
这与我在这里的答案基本相同，但对于单个模型。
至于视图更改，我建议将“显示”或“已加载”变量添加到模型中，默认情况下为false，并在数据准备好时设置为true。 然后，让视图侦听’change：display’事件，在准备好时触发render（）方法。 您可以在知道数据已更改后立即删除旧视图，并将其替换为某个加载微调器，然后将由新数据视图替换。 希望这有帮助。
困惑的部分：
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); },
我以前没有使用过Backbone.LocalStorage，文档没有说明你应该如何清除数据，但是，在源代码中有一个_clear()方法可以解决这个问题：
function listStore (model, response, options) { searchM.localStorage = new Backbone.LocalStorage("music"); searchM.localStorage._clear(); searchM.save({music: response}, {success: console.log('success') });
至于切换到新视图，通常使用Backbone.Router处理，它将处理用户重定向到您希望的应用程序的任何区域。
var MyRouter = Backbone.Router.extend({ routes: { "search/:query": "search", // #search/kiwis "page": "page" // #page }, page: function() { new PageView(); //etc... }, search: function(query) { ... } }); //this line is required to tell Backbone that your routes are ready Backbone.history.start();
一旦建立了适当的路线，您可以通过以下方式导航到所需的位置：
function listStore (model, response, options) { //check to see if the LS exists, and clear it if so if(searchM.localStorage){ searchM.localStorage._clear(); } searchM.localStorage = new Backbone.LocalStorage("music"); searchM.save({music: response}, {success: console.log('success'); searchM.on('sync', function(){ MyRouter.navigate("page", {trigger: true}); }); });