Столкнувшись с проблемой нокаутирующей привязки

У меня есть несколько вкладок (A, B, C), и при загрузке вкладки «C» свойства модели должны привязываться к вкладке «c». Я столкнулся с проблемой привязки данных.

Три вкладки (A, B, C) находятся внутри другого вида View 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>

Представление, содержащее вкладки, имеет модель представления, и я хочу связать компоненты вкладки "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», но привязка не происходит.

Поэтому я переместил свойства C из «MainviewModel» в функцию загрузки «tabC1», но привязка данных все еще не происходит.

Итак, я создал новую модель представления внутри функции загрузки div «tabC1» и попытался применить привязки к загрузке div «tabC1».

Может ли кто-нибудь помочь, если подход неправильный, или дайте мне знать, как я могу его достичь.

Вот подробности ошибки, с которой я столкнулся

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

person AMDI    schedule 04.07.2016    source источник
comment
Вы привязываетесь к organizationDetailsCAPDViewModel, который (насколько я могу судить) не содержит метода с именем loadAutoProvision. Ваш HTML имеет click: loadAutoProvision, поэтому он выдаст ошибку. Вы хотели расширить MainViewModel?   -  person user3297291    schedule 04.07.2016
comment
Мое требование: когда загружается div «C», который находится в основном представлении «A», я хочу связать элементы, связанные с CAPD, с «tabc1», который находится в другом представлении «Tabc».   -  person AMDI    schedule 05.07.2016
comment
Хотя мне неясно, точно что вы пытаетесь сделать, я могу сказать, что вы смешиваете jQuery и нокаут нежелательным образом... Посмотрите привязки нокаута template и with. Они позволяют вам вводить HTML в DOM, данные которого привязаны к подмодели представления.   -  person user3297291    schedule 05.07.2016
comment
Извините, если вы не понимаете. Мое требование: я загружаю основной вид, который имеет несколько вкладок. При загрузке одной вкладки я загружаю другой вид, который имеет некоторые нокаутирующие привязки. Как я могу связать события второго представления в js-файл основного вида   -  person AMDI    schedule 05.07.2016


Ответы (1)


Я нашел решение вышеуказанной проблемы, я изменил строку

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

ko.applyBindings(CAPDModel, $("#tabC1")[0]);
person AMDI    schedule 05.07.2016