iOS UIWebView中的剑道MVVM

我们在iOS UIWebView中嵌入了一些自定义HTML页面。我们用路径加载页面，然后，所有的脚本都被加载到页面中，一切看起来都很好。除了一个:按钮的"启用"状态。虽然它在Chrome和Safari中100%有效，但一旦嵌入到UIWebView中，它似乎不会在每次按下按钮时刷新。但我点击一个字段，然后绑定函数似乎被调用。我使用了Kendo文档中指定的"enabled"绑定。

*此处为工作示例。如果你在iPad上用Safari加载你会看到这个问题

这是我的HTML样本:

<div class="gui-header-section k-content">
        <h1>Test</h1>
    </div>
    <div id="recolteInfoDiagnostic">
        <div id="section1" data-bind="visible: isSectionVisible(1)">
            <div class="gui-form-section k-content">
                <div>
                    <form>
                        <ul class="fieldlist">
                            <li>
                                <label for="fname">First name</label>
                                <input id="fname" data-bind="value: firstNameSousc" class="k-textbox" /></li>
                            <li>
                                <label for="lname">Last Name:</label>
                                <input id="lname" data-bind="value: lastNameSousc" class="k-textbox" /></li>
                            <li>
                                <label>Gender:</label>
                                <select id="cbxGenderSousc" data-bind="source: gendersDataSource, value: genderSousc"></select></li>
                            <li>
                                <label for="agree">License Agreement</label>
                                <input type="checkbox" id="agree" data-bind="checked: agreed" />
                                I have read the licence agreement</li>
                        </ul>
                    </form>
                </div>
            </div>
            <div class="gui-form-section k-content">
                <div>
                    <!-- Some content, ommited for clarity -->
                </div>
            </div>
        </div>
        <div id="section2" data-bind="visible: isSectionVisible(2)">
            <div class="gui-form-section k-content">
                <!-- Some content, ommited for clarity -->
            </div>
            <div class="gui-form-section k-content">
                <!-- Some content, ommited for clarity -->
            </div>
        </div>
        <div id="navToolBar" class="gui-header-section k-content">
            <div>
                <button data-bind="enabled: isBackEnabled, click: back" class="k-button k-primary">Back</button>
                <button data-bind="enabled: isNextEnabled, click: next" class="k-button k-primary">Next</button>
            </div>
        </div>
    </div>

和相应的javascript:

$(document).ready(function () {
var kendoViewModel = kendo.observable({
    formID: "informationsDiagnostic",
    visibleSectionNo: 1,
    totalPageNumber: 2,
    firstNameSousc: "",
    lastNameSousc: "",
    genderSousc: "",
    agreed: false,
    gendersDataSource = new kendo.data.DataSource({
        data: [
            { text: "Male", lang: "en", value: "M" },
            { text: "Female", lang: "en", value: "F" }
        ]
    }),
    isBackEnabled: function() {
        return !(this.get("visibleSectionNo") === 1);
    },
    isNextEnabled: function() {
        return !(this.get("visibleSectionNo") === this.get("totalPageNumber"));
    },
    next: function (e) {
        e.preventDefault();
        this.set("visibleSectionNo", this.get("visibleSectionNo") + 1);
    },
    back: function (e) {
        e.preventDefault();
        this.set("visibleSectionNo", this.get("visibleSectionNo") - 1);
    },
    isSectionVisible: function(pageNumber) {
        return (pageNumber === this.get("visibleSectionNo"));
    }
});
$("#cbxGenderSousc").kendoDropDownList({
    dataSource: gendersDataSource,
    dataValueField: "value",
    dataTextField: "text"
}).data("kendoDropDownList");
kendo.bind($("#recolteInfoDiagnostic"), kendoViewModel);

});

注意，"可见"属性上的数据绑定工作得很好，但我只是不能使它在"enabled"属性上正确工作。