更改时自动刷新列表视图-knockoutjs&；jquerymobile

我在JQuery Mobile中使用knockoutjs（非常新）。我有一个将筛选结果绑定到的listview。在我第一次调用时加载数据之后

$('ul').listview('refresh');

为了让JQM重新设置我的列表的样式，这非常有效

然而，当我过滤我的列表时，它会被重新命名并再次释放样式，我不知道在哪里再次调用刷新

我的html如下所示：

<p>Filter: <input data-bind="value: filter, valueUpdate: 'afterkeydown'" /></p>
     <ul data-role="listview" data-theme="g" data-bind="template: {name: 'myTemplate', foreach: filteredItems }" />

我确信我错过了一些非常愚蠢的事情

---

谢谢您的时间。

这个问题已经在KO论坛上出现过好几次了

一个选项是创建绑定到

filteredItems

并运行listview刷新的绑定

它可能看起来像：

   ko.bindingHandlers.jqmRefreshList = { 
     update: function(element, valueAccessor) { 
       ko.utils.unwrapObservable(valueAccessor()); //just to create a dependency
       $(element).listview("refresh"); 
     } 
   };

现在，您可以将其放置在容器（或任何元素）上，并传入希望其依赖的可观察对象，如：

<ul data-bind="jqmRefreshList: filteredItems"></ul>

您可以将整个工作代码发布到JSFIDLE上吗？因为我遇到了同样的问题，我尝试了你的解决方案，但仍然不起作用

[编辑]：好的，这样对我很好：

ko.bindingHandlers.jqmRefreshList = {
    update: function (element, valueAccessor) {

        ko.utils.unwrapObservable(valueAccessor()); //just to create a dependency
        setTimeout(function () { //To make sure the refresh fires after the DOM is updated 
            $(element).listview();
            $(element).listview('refresh');
        }, 0);
    }
};

---

在前面两个答案的基础上，这里有一些更完整的内容。它允许您使用无容器绑定（即注释中的foreach），并通过处理异常而不是超时来解决jQM页面生命周期后触发刷新的问题：

ko.virtualElements.allowedBindings.updateListviewOnChange = true;
ko.bindingHandlers.updateListviewOnChange = {
  update: function (element, valueAccessor) {
    ko.utils.unwrapObservable(valueAccessor());  //grab dependency

    var listview = $(element).parents()
                             .andSelf()
                             .filter("[data-role='listview']");

    if (listview) {
      try {
        $(listview).listview('refresh');
      } catch (e) {
        // if the listview is not initialised, the above call with throw an exception
        // there doe snot appear to be any way to easily test for this state, so
        // we just swallow the exception here.
      }
    }
  }
};

---

有一个。希望有帮助

谢谢，我以前遇到过这个，但是我不确定如何将这个绑定应用到我的foreach？真的，你可以将它应用到任何元素，甚至是主体。如果您想将其保留在模板中，那么您可以这样做：

data bind=“template:{name:'myTemplate'，foreach:filteredItems}，jqmRefreshList:filteredItems”

非常感谢！工作很愉快。顺便说一句，knockmeout是一个很棒的网站。在我将$（element）.listview（“refresh”）包装在一个try/catch中之后，上面的内容对我很有用，可以忽略第一次调用时的初始化问题，否则在@Niemeyer这里工作就太棒了！这使我免于把笔记本电脑扔出窗外，谢谢！在我的情况下，我是返回一个可观察的耳环。因此，为了使用它，我需要执行以下操作：data bind=“template:{name:'myTemplate'，foreach:filteredItems（）}”

ko.virtualElements.allowedBindings.updateListviewOnChange = true;
ko.bindingHandlers.updateListviewOnChange = {
  update: function (element, valueAccessor) {
    ko.utils.unwrapObservable(valueAccessor());  //grab dependency

    var listview = $(element).parents()
                             .andSelf()
                             .filter("[data-role='listview']");

    if (listview) {
      try {
        $(listview).listview('refresh');
      } catch (e) {
        // if the listview is not initialised, the above call with throw an exception
        // there doe snot appear to be any way to easily test for this state, so
        // we just swallow the exception here.
      }
    }
  }
};