iOSの剣道MVVM UIWebView

iOS UIWebViewにカスタムHTMLページが埋め込まれています。ページにパスをロードしてから、すべてのスクリプトがページに読み込まれ、すべてがうまく見えます。 1つ以外のすべて：ボタンの「有効」状態。 ChromeとSafariでは100％動作しますが、UIWebViewに埋め込まれると、ボタンが押されるたびにリフレッシュされません。しかし、フィールドをクリックすると、バインディング関数が呼び出されるようです。私はKendo documentationで指定されているように "有効"バインディングを使用しました。iOSの剣道MVVM UIWebView

*作業sample here。

<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：あなたはiPadでのSafariでそれをロードする場合は、ここで問題

が私のHTMLサンプルです表示されます

$(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"プロパティのdata-bindは正常に動作しますが、 "enabled"プロパティで正しく動作させることはできません。フォーム内のその他のバインディングはすべてOKです。

出典

2016-08-30 Patrice Cote