0

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

此外，试图弄清楚如何在设置本地存储的成功回调之后将用户重定向到新视图，我知道有 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(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 或 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);
        };
4

2 回答 2

1

我以前没有使用过 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});
            });
    });
于 2013-10-20T02:51:32.277 回答
1

试试这个摆脱模型：

searchM.destroy();

这与我在此处的回答基本相同，但适用于单个模型。

至于视图更改，我建议在模型中添加一个“显示”或“加载”变量，默认情况下为假，当数据准备好时设置为真。然后，让视图监听 '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);
    },
于 2013-10-20T20:38:15.860 回答