jquery-mobile - 使用jquery mobile和knockout的动态复选框控件组

Question

我正在尝试动态创建和过滤包含使用 knockout 绑定(bind)的复选框的 jquery 移动控制组。基本思想是用户选择一个选项来过滤控制组中的复选框列表。我在这里看到过类似的问题，但它们似乎都是一次性绑定(bind)，一旦被 ko 绑定(bind)并被 jqm 增强，它们就保持不变。我有这种行为，当底层 viewModel 发生变化并且 ko 更新控制组中的复选框列表时，就会出现问题。可以在此处的 jsfiddle 上找到该行为的完整演示:http://jsfiddle.net/hkrauss2/JAvLk/15/

我可以看出问题是由于 jqm 在增强控制组时创建了一个包装器 div。 Ko 然后在更新 DOM 时将新元素放在包装器 div 之上。基本上我是在问是否有人解决了这个问题，以及是否有人认为我通过集成这两个库是在自找麻烦？提前感谢大家。

这是 Html:

<div id="home" data-role="page">
<div data-role="header">
    <h2>Knockout Test</h2>
</div>
<div data-role="content">
    <ul id="parent-view" data-role="listview" data-inset="true" data-bind="foreach: parentCategories">
        <li><a href="#list" data-transition="slide" data-bind="text: description, click: $parent.OnClick"></a></li>
    </ul>
    <p>
        To reproduce the issue select Restaurants, come back and select Nightlife or Bars
    </p>
</div>
</div>
<div id="list" data-role="page">
<div data-role="header">
    <h2>Knockout Test</h2>
    <a data-rel="back" data-icon="carat-l" data-iconpos="notext">Back</a>
</div>
<div data-role="content">
    <form>
        <div id="child-view" data-role="controlgroup" data-bind="foreach: childCategories, jqmRefreshControlGroup: childCategories">
            <input type="checkbox" name="checkbox-v-2a" data-bind="attr: {id: 'categoryId' + id}" />
            <label data-bind="text: description, attr: {for: 'categoryId' + id}" />
        </div>
    </form>
</div>
</div>

还有基本的javascript。请注意，此处未列出两个外部 js 文件。一个在 mobileinit 事件上设置 $.mobile.autoInitializePage = false;。另一个以 JSON 数组的形式引入数据，用于初始化 AppViewModel 中的 Categories 属性。

// Custom binding to handle jqm refresh
ko.bindingHandlers.jqmRefreshControlGroup = {
  update: function (element, valueAccessor) {
    ko.utils.unwrapObservable(valueAccessor());
    try {
        $(element).controlgroup("refresh");
    } catch (ex) { }
  }
}
function GetView(name) {
  return $(name).get(0);
}

// Define the AppViewModel
var AppViewModel = function () {
  var self = this;

  self.currentParentId = ko.observable(0);
  self.Categories = ko.observableArray(Categories); // Categories comes from sampledata.js

  self.parentCategories = ko.computed(function () {
    return ko.utils.arrayFilter(self.Categories(), function (item) {
        return item.parentId == 0;
    });
  });

  self.childCategories = ko.computed(function () {
    return ko.utils.arrayFilter(self.Categories(), function (item) {
        return item.parentId == self.currentParentId();
    });
  });

  self.OnClick = function (viewModel, $event) {
    self.currentParentId(viewModel.id);
    return true;
  };
};

// Create the AppViewModel
var viewModel = new AppViewModel();

// Apply bindings and initialize jqm
$(function () {
  ko.applyBindings(viewModel, GetView('#parent-view'));
  ko.applyBindings(viewModel, GetView('#child-view'));
  $.mobile.initializePage();
});

Answer 1

更新

我的旧解决方案将每个元素包装在 ui-controlgroup-controls 中div，它添加了不必要的标记。然而，增强部分是必不可少的。

$(element).enhanceWithin().controlgroup("refresh"); /* line 16 in fiddle */

新的解决方案更加动态，无需额外包装即可保持干净的标记:

• 第一步:一旦controlgroup被创建controlgroupcreate (事件)，添加 data-bind到它的容器 .controlgroup("container")

• 第二步:添加由input组成的复选框和 label .同时，对于每个元素，添加data-bind

• 第三步:应用绑定(bind)ko.applyBindings() .

controlgroup 的静态结构应该是基本的，它不应该包含任何静态元素。如果静态添加复选框，则每个动态创建的复选框 都将包装在额外的.ui-checkbox 中。分区

<div id="child-view" data-role="controlgroup">
   <!-- nothing here -->
</div>

JS

$(document).on("controlgroupcreate", "#child-view", function (e) {
    $(this)
        .controlgroup("container")
        .attr("data-bind", "foreach: childCategories, jqmRefreshControlGroup: childCategories")
        .append($('<input type="checkbox" name="checkbox" />')
        .attr("data-bind", "attr: {id: 'categoryId' + id}"))
        .append($('<label />')
        .attr("data-bind", "text: description, attr: {for: 'categoryId' + id}"));
    ko.applyBindings(viewModel, GetView('#child-view'));
});

Demo

---

旧解

自 jQuery Mobile 1.4 起，项目应附加到 .controlgroup("container")不直接到$("[data-role=controlgroup]") .

首先，您需要将 controlgroup 的内部元素包装在类为 ui-controlgroup-controls 的 div 中它充当 控制组容器。

<div id="child-view" data-role="controlgroup" data-bind="foreach: childCategories, jqmRefreshControlGroup: childCategories">
  <div class="ui-controlgroup-controls">
    <input type="checkbox" name="checkbox-v-2a" data-bind="attr: {id: 'categoryId' + id}" />
    <label data-bind="text: description, attr: {for: 'categoryId' + id}" />
  </div>
</div>

第二步，您需要使用.enhanceWithin() 来增强 插入到controlgroup 容器 中的元素。 .

$(element).enhanceWithin().controlgroup("refresh"); /* line 16 in fiddle */

Demo