为什么这个简单的 Knockout.js 示例不起作用？答案

【问题标题】：Why doesn't this simple Knockout.js example work?为什么这个简单的 Knockout.js 示例不起作用？
【发布时间】：2013-03-16 06:49:51
【问题描述】：

我正在使用 Knockout.js 并创建了这个简单的示例：http://jsfiddle.net/JcTxT/30/

<div id="term_grp" data-role="fieldcontain"><a>Semester:</a>

<fieldset id="term_fields" data-role="controlgroup" data-type="horizontal">
    <input type="radio" name="term" id="ss" value="ss" data-bind="checked: term" />
    <label for="ss">Sommersemester</label>
    <input type="radio" name="term" id="ws" value="ws" data-bind="checked: term" />
    <label for="ws">Wintersemester</label>
</fieldset>
Term is <span data-bind="text: pommes"></span>

var aResult = {
    term: ko.observable("ss"),
    pommes: "TEST"
};

$(document).on('pagebeforeshow', '#mainPage', function () {
    ko.applyBindings(aResult);
});

我希望选中其中一个单选按钮（值为“ss”的那个，但事实并非如此。有谁知道，为什么？

干杯

【问题讨论】：

jQuery Mobile 是您问题的根源。它改变了可能弄乱绑定的dom。您的单选按钮已绑定，但 jQuery Mobile 将其隐藏并插入未绑定的 div 和 span。
好的，他们的绑定框架是否与 jQUery Mobile 兼容？

标签： javascript jquery jquery-mobile knockout.js

【解决方案1】：

如果你使用它，它会起作用： $(function () { ko.applyBindings(aResult); }); 并关闭 jquery mobile。

我在你的 jsfiddle 中试过了。

如果您需要 jquery mobile，此链接有效： http://www.codesizzle.com/jquery-mobile-radio-with-knockout-js/

【讨论】：

添加了关于 jquery mobile 的注释

【解决方案2】：

好的，需要做什么？

添加另一个事件处理程序并将其添加到绑定中：

var aResult = {
    term: ko.observable("ws"),
    pommes: "TEST2"
};

ko.bindingHandlers.mobileradio = {
    init: function (element, valueAccessor) {},
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        if (valueUnwrapped == $(element).val()) {
            $(element).prop("checked", "true").checkboxradio("refresh");
        } else {
            $(element).removeProp("checked").checkboxradio("refresh");
        }
    }
};

$(function () {
    ko.applyBindings(aResult);
});

工作小提琴：http://jsfiddle.net/JcTxT/35/

【讨论】：