Javascript jQuery mobile未刷新Backbone.js支持的列表（listview（'refresh'））

我试图将排序选项添加到由backbone.js集合支持的JQM列表中。我能够通过集合的视图对集合进行排序并重新提交列表，但JQM没有刷新列表

我一直在搜索，发现了几个与我的问题类似的问题：如何刷新JQM列表视图，但我一直无法让它工作

我尝试调用$'list'.listview'refresh'和$'list-page'.page等，但都没有用。我怀疑可能我在错误的地方调用了refresh方法，但我不确定我应该把它放在哪里，我只是从主干开始

这是标记和js

HTML:

Javascript:

  $(function () {

    window.Item = Backbone.Model.extend({
    ID: null,
    Name: null
});

window.ItemList = Backbone.Collection.extend({
    model: Item
});

window.items = new ItemList;
window.ItemView = Backbone.View.extend({
    tagName: 'li',

    initialize: function () {
        this.model.bind('change', this.render, this);
    },

    render: function () {
        $(this.el).html('<a>' + this.model.get('Name') + '</a>');
        return this;
    }
});

window.ItemListView = Backbone.View.extend({

    el: $('body'),

    _ItemViews: {},

     events: {
        "click #btnSortByID": "sortByID",
        "click #btnSortByName": "sortByName"
    },

    initialize: function () {
        items.bind('add', this.add, this);
        items.bind('reset', this.render, this);
    },

    render: function () {

        $('#ItemList').empty();

        _.each(items.models, function (item, idx) {
            $('#ItemList').append(this._ItemViews[item.get('ID')].render().el);
        }, this);
        
         $('#ItemList').listview('refresh'); //not working
        // $('#ItemList').listview(); 
        // $('#Page1').trigger('create');
         // $('#Page1').page(); //also doesn't work
    },


    add: function (item) {
        var view = new ItemView({ model: item });
        this._ItemViews[item.get('ID')] = view;
        this.$('#ItemList').append(view.render().el);

    },

    sortByName: function () {
        items.comparator = function (item) { return item.get('Name'); };
        items.sort();
    },

    sortByID: function () {
    
        items.comparator = function (item) { return item.get('ID'); };
        items.sort();
    }
});

window.itemListView = new ItemListView;

window.AppView = Backbone.View.extend({ 

    el: $('body'),

    initialize: function () {

        items.add([{ID: 1, Name: 'Foo 1'}, {ID:2, Name: 'Bar 2'}]);

    },
});

window.App = new AppView; 

});

编辑：我意识到我发布的第一行html标记没有显示在我的帖子中，所以我把它往下推了一行

编辑2：这里有一个指向JSFIDLE代码的链接

编辑3查看结果标记，JQM似乎将一些类添加到列表项中。我尝试使用一个标志手动添加它们，以确定列表是否因排序而重新排序，然后列表将正确显示

然而，除了有点丑陋的解决方案之外，更重要的是，在我发布的代码示例中，“item”视图上的主干事件不再触发，我没有为事件添加代码，因为我试图尽可能保持它的相关性

Edit4我通过清除缓存中的视图并重新创建它们，使它能够正常工作。我把答案贴在下面

编辑5

---

我用我认为更好的答案更新了我的答案。

我不确定这是否应该是它自己的答案。我确实浏览了一些常见问题，所以现在我只是更新我以前的答案

现在，我找到了一种更好的方法，可以使用缓存视图对列表进行排序。本质上，技巧是对集合进行排序，从DOM中分离元素，然后重新附加它们。 所以

现在的代码是

 $list = $('#ItemList')

 $('li', $list ).detach();
 var frag = document.createDocumentFragment();
 var view;
    _.each(item.models, function (mdl) {
    view = this._ItemViews[item.get('ID')];
        frag.appendChild(view.el);
    },this);

   $list.append(frag);

旧答案

我差不多解决了这个问题。我在检查呈现的元素，我注意到当元素在排序后“重新呈现”时，它们丢失了我在firebug中检查的事件处理程序。所以我决定清除缓存中的视图并重新创建它们。这似乎起到了作用，尽管我不确定确切的原因

守则：

而不是：

  $('#ItemList').empty();
    _.each(items.models, function (item, idx) {
        $('#ItemList').append(this._ItemViews[item.get('ID')].render().el);
    }, this);
     $('#ItemList').listview('refresh'); //not working

我清除视图缓存并重新创建视图

  $('#ItemList').empty();
        this._ItemViews = {};
        _.each(items.models, function (item, idx) {
            var view = new ItemView({ model: item  });
            this._ItemViews[item.get('ID')] = view;
            this.$('#ItemList').append(view.render().el)           
        }, this);
        $('#ItemList').listview('refresh'); //works now

---

我想如果我不需要重新生成缓存可能会更好，但至少这是一个有效的解决方案，如果我没有得到更好的答案，那么我就接受这个答案。

我不确定这是否应该是它自己的答案，我确实仔细查看了FAQ，所以现在我只是更新了我以前的答案

现在，我找到了一种更好的方法，可以使用缓存视图对列表进行排序。本质上，技巧是对集合进行排序，从DOM中分离元素，然后重新附加它们。 所以

现在的代码是

 $list = $('#ItemList')

 $('li', $list ).detach();
 var frag = document.createDocumentFragment();
 var view;
    _.each(item.models, function (mdl) {
    view = this._ItemViews[item.get('ID')];
        frag.appendChild(view.el);
    },this);

   $list.append(frag);

旧答案

我差不多解决了这个问题。我在检查呈现的元素，我注意到当元素在排序后“重新呈现”时，它们丢失了我在firebug中检查的事件处理程序。所以我决定清除缓存中的视图并重新创建它们。这似乎起到了作用，尽管我不确定确切的原因

守则：

而不是：

  $('#ItemList').empty();
    _.each(items.models, function (item, idx) {
        $('#ItemList').append(this._ItemViews[item.get('ID')].render().el);
    }, this);
     $('#ItemList').listview('refresh'); //not working

我清除视图缓存并重新创建视图

  $('#ItemList').empty();
        this._ItemViews = {};
        _.each(items.models, function (item, idx) {
            var view = new ItemView({ model: item  });
            this._ItemViews[item.get('ID')] = view;
            this.$('#ItemList').append(view.render().el)           
        }, this);
        $('#ItemList').listview('refresh'); //works now

---

我想如果我不需要重新生成缓存可能会更好，但至少这是一个有效的解决方案，如果我没有得到更好的答案，那么我就接受这个解决方案。

我在解决这个问题上有点运气，但原因仍然不清楚

---

基本上，在建立元素的html之后，在渲染视图的顶部，我调用listview。然后，我可能添加到列表中的任何其他项目都会调用listview“refresh”。

我很幸运地解决了这个问题，但原因仍然不清楚

---

基本上，在建立元素的html之后，在渲染视图的顶部，我调用listview。然后，我可能添加到列表中的任何其他项目都会调用listview‘刷新’。

我也不知道为什么重新初始化listview会有帮助，但我认为我最终得到的解决方案更为有利，因为在我的场景中，我不想重新命名我只想对列表排序的元素。我也不知道为什么重新初始化listview会有帮助，但我认为我最终得到的解决方案更为有利，因为我没有在我想对列表排序的场景中重新排序元素。