javascript – 清除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();

这与我的答案here基本相同,但对于单个模型.

至于视图更改,我建议将“显示”或“已加载”变量添加到模型中,默认情况下为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);
    },

来源：https://www./content-1-480551.html