ノックアウトバインディングの問題点

Question

複数のタブ（A、B、C）があり、 'C'タブの読み込み時に、モデルプロパティがタブ 'c'にデータバインドする必要があります。 私はデータバインドの問題に直面しています。

3つのタブ（A、B、C）ここで、別のビュービューA.

内にある私の見解は

<div id="tabMain" style="width:1230px;height:auto;overflow:auto;"> 
        <ul> 
         <li><a href="#A">A</a></li> 
         <li><a href="#B">B</a></li> 
         <li data-bind="click:loProvision"><a href="#C">C</a> 

Here is my Tab 'c' 



<div id="SubC"> 
<ul> 
     <li><a href="#tabC1">tabc1</a></li> 
</ul> 
     <div id="tabC1" style="overflow:auto;"> 

     <div> 
      @Html.HiddenFor(m => m.UID) 
      <div style="width:500px;height:20px;margin-left:30px"> 
      <div >@Html.NCheckBoxFor(m => m.EnablePD, new { id = "cbPD", style = "vertical-align:middle;", data_bind = "checked:enablePD" }, Model.IsReadOnly)</div> 
      <div > 
       <label for="cbOrgDetailsPD">@Res.OrganizationStrings.Ect</label> 
      </div> 
      </div> 
      <div style="width:100%;margin-top:10px;margin-left:30px"> 
      <div style="width:22%;"> 
       <label for="ddPD">Strings.PlaceUsersInGroup</label> 
      </div> 
      <div style="width:45%">@Html.NDropDownListFor(m => m.PD, Model.groups, new { id = "ddPD", style = "width:270px;height:25px;vertical-align:middle;", , data_bind = "enable: enablePD" 
       }, Model.IsReadOnly)</div> 
      </div> 
      <div style="margin-top:20px;margin-left:30px"> 
      <div >@Html.NCheckBoxFor(m => m.ProType, new { id = "cbType", style = "vertical-align:middle;", data_bind = "checked:enableing" }, Model.IsReadOnly)</div> 
      <div > 
       <label for="cbByType">@Res.Strings.Enableing</label> 
      </div> 
      </div> 
     </div> 
     </div> 

タブを含むことのviewmodelを持つと私が欲しいれるビューですタブ 'c'がロードされたときにタブ 'c'コンポーネントをバインドします。ここで

は、私のJavascriptコードです：

function Intialize { 
     var model = new MainviewModel(); 
     ko.applyBindings(model, document.getElementById(orgDetailsTab.getId())); 
    } 

    function MainviewModel() { 
     this.loadvision = function() { 
     if (isvisionsLoaded === false) { 

      var autoUrl = '/Org/OrgView?UID=' + UID + '&isReadOnly=' + isReadOnly; 
      loadvision(); 
     } 
     }; 

    } 
    var CAPDModel; 

    function loadvision() { 
     try { 
     $('#C').empty(); 
     $.ajaxSetup({ 
      cache: false 
     }); 
     $('#C').load(visionUrl, function(responseText, textStatus, XMLHttpRequest) { 

       $("#SubC").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 

       isLoaded = true; 

       CModel = new organizationViewModel(); 
       ko.applyBindings(CModel, document.getElementById(tabC1)); 

       function orgViewModel() { 
       this.enablePD = ko.observable($('#cbOrgPD').is(':checked')); 
       this.enableCing = ko.observable($('#cbType').is(':checked')); 
       this.enableLicense = ko.observable($('#cbOrgDetailsLicenses').is(':checked')); 
       this.cansee = ko.observable(false); 
       this.canRemove = ko.observable(false); 
       } 

      } 

私は

ko.applyBindings（CModel、のdocument.getElementById（tabC1））で例外を取得しています。

私の要件はTab 'tabC1'の読み込みにあり、html属性をデータバインドする必要があります（htmlフィールドの無効化と有効化）。

私はCAPD関連のプロパティを 'MainviewModel'に最初に配置しましたが、バインディングは起こっていません。

私は 'MainviewModel'から 'tabC1'ロード機能にCプロペティを移動しましたが、データバインドはまだ発生していません。

私は 'tabC1' div load関数内に新しいviewmodelを作成し、div 'tabC1'のロード時にバインディングを適用しようとしました。

アプローチが間違っている場合は、何人かの指導をしてもらえますか、それともどのように達成できるか教えてください。ここで

iは

ko.applyBindings(CModel, document.getElementById(tabC1)); 

Unhandled exception at line 26076, column 17 in eval code 

0x800a139e - JavaScript runtime error: Unable to parse bindings. 

Message: ReferenceError: 'loadvision' is undefined; 

Bindings value: click:loadvision 

Answer 1

に直面していますエラーの詳細である私は、私はあなたがorganizationDetailsCAPDViewModel` `に結合しているライン

ko.applyBindings(CAPDModel, document.getElementById(tabC1)); changed to 

ko.applyBindings(CAPDModel, $("#tabC1")[0]);