Question

嘿所以我正在使用骨干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);
        };

Answer 1

之前我没有使用过Backbone.LocalStorage，文档没有说明你应该如何清除数据，但是，在source code中有一个_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来处理，该{{3}}会将用户重定向到您希望的应用程序的任何区域。

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});
            });
    });

Answer 2

试试这个摆脱模型：

searchM.destroy();

这与我的回答here基本相同，但对于单个模型。

对于视图更改，我建议添加一个＆＃39;显示＆＃39;或者＆＃39;加载＆＃39;变量到模型，默认情况下为false，并在数据准备好时设置为true。然后，让视图听取＆＃39;更改：显示＆＃39; event，准备好后触发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);
    },

清除localStorage并更改Backbone视图

2 个答案: