javascript - 清除localStorage并更改 View Backbone

Question

嘿，我正在使用主干本地存储，每次有人点击搜索按钮时，我都想清除本地存储，这样我就可以将新数据添加到本地存储中。

此外，尝试弄清楚如何在设置本地存储的成功回调后将用户重定向到新 View ，我知道有 view.remove() 但我不确定如何使用它回调位于 View 内，以及在何处/如何渲染新 View ...

假设新 View 是 PageView...

以下是当前搜索 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;
});

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

这是模型:

define([
  'underscore',
  'backbone'
], function(_, Backbone) {

  var Search = Backbone.Model.extend({
    url: '/music',
    defaults: {
        display: false
    }

  });
  return Search;
});

----------------编辑与以下内容混淆

这是容器和SearchM(模型)、SearchV( View )、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;
});

这是搜索 View - 所以我从这里取出了模型，但是调用 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

尝试这个来摆脱模型:

searchM.destroy();

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

对于 View 更改，我建议向模型添加“显示”或“加载”变量，默认情况下为 false，并在数据准备好时设置为 true。然后，让 View 监听“change:display”事件，准备好后触发 render() 方法。一旦您知道数据已更改，您就可以删除旧 View ，并将其替换为一些加载微调器，然后该微调器将被新数据 View 替换。希望这有帮助。

令人困惑的部分:

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