javascript - jQuery Mobile 未刷新 Backbone.js 支持的列表( ListView (‘refresh’))

Question

我正在尝试将排序选项添加到由 backbone.js 集合支持的 JQM 列表。我能够对集合进行排序(通过集合的 View )并重新呈现列表，但 JQM 不会刷新列表。

我一直在搜索，我发现了几个与我的类似的问题(让 JQM ListView 刷新的问题)，但我一直无法让它工作。

我试过调用 $('#list').listview('refresh') 和 $('#list-page').page()等无济于事。我怀疑也许我在错误的地方(提前)调用了刷新方法，但我不确定我应该把它放在哪里(我刚开始使用主干)。

这是标记和 js。

HTML:

<div data-role="page" id="Main">
<div data-role="header"><h1>Main Page</h1></div>
<div data-role="content">   
        <ul data-role="listview">
            <li><a href="#Page1">Page 1</a></li>
        </ul> 
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>

<div data-role="page" id="Page1">
  <div data-role="header">
  <a href="#Main" data-role="back" data-icon="back">Back</a>
  <h1>Items</h1><a href="#dvItemSort" >Sort</a></div>
  <div data-role="content">
    <div id="dvTest">
        <ul id="ItemList" data-role="listview"  data-filter="true"></ul>
    </div>
  </div><div  data-role="footer"><h4>Footer</h4></div></div>

  <div data-role="page" id="dvItemSort">
  <div data-role="header"><h4>Sort</h4></div>
      <a href="#Page1" type="button" 
       name="btnSortByID" id="btnSortByID">ID</a>
      <a href="#Page1" type="button" 
       name="btnSortByName" id="btnSortByName">Name </a>
  </div>

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:这是指向代码 http://jsfiddle.net/8vtyr/2/ 的 jsfiddle 的链接

EDIT 3 查看生成的标记，JQM 似乎将一些类添加到列表项中。我尝试使用标志手动添加它们，以确定列表是否由于排序而重新呈现，然后列表是否正确显示。

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

编辑 4 我通过清除我的 View 缓存并重新创建它们来让它工作。我在下面发布了我的答案。

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

Answer 1

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

我现在找到了一种使用缓存 View 对列表进行排序的更好方法。本质上，诀窍是对集合进行排序，从 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 )。所以我决定清除我的 View 缓存并重新创建它们。这似乎可以解决问题，但我不太确定具体原因。

对于代码:

代替:

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

我清除 View 缓存并重新创建 View 。

  $('#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

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