Kendo iOS UIWebView 中的 MVVM

Question

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

*工作 sample here。如果您在 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);

});

请注意，"visible" 属性上的数据绑定工作正常，但我无法使其在 "enabled" 属性上正常工作。表单中的所有其他绑定都可以。

Answer 1

原来你所要做的就是去掉按钮标签中的 "k-primary" 样式。

Kendo iOS UIWebView 中的 MVVM

Kendo MVVM in iOS UIWebView

javascript

mvvm

uiwebview

ios

kendo-ui