Question

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

我一直在搜索，我发现了几个类似于我的问题（让JQM列表视图刷新的问题），但我一直无法让它工作。

我试过调用$(‘#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的链接

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

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

编辑4 我通过清除视图缓存并重新创建它来实现它。我在下面发布了我的答案。

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

Answer 1

我不确定这是否应该是它自己的答案（我确实仔细阅读了常见问题解答），所以现在我只是更新我以前的答案。

我现在找到了一种使用缓存视图对列表进行排序的更好方法。基本上诀窍是对集合进行排序，从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);

OLD ANSWER

我有点解决了这个问题。我正在检查渲染的元素，我注意到当元素被“重新渲染”（排序后）时，它们丢失了事件处理程序（我在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

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

Answer 2

我有幸解决了这个问题，但其原因仍然模糊不清。

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

Backbone.js支持的列表没有被jQuery mobile刷新（listview（'refresh'））

2 个答案: