2016-08-30 59 views
0

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

*工作sample here。如果你使用Safari加载它在iPad上,你会看到这个问题

这里是我的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); 

});

请注意,“可见”属性上的数据绑定工作正常,但我无法使其在“已启用”属性上正常工作。表单中的所有其他绑定都可以。

回答

0

原来你所要做的就是摆脱按钮标签中的“k-primary”风格。