Facing issue with knockout binding

Question

I am having multiple tabs(A,B,C) and on load of 'C' tab,the model properties should data-bind to tab 'c'. I am facing issue with data-bind.

The three tabs(A,B,C) are inside another view View A.

Here is my 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>

The View which containing the tabs is having the viewmodel and i want to bind the tab 'c' components when the tab 'c' loaded.

Here is my Javascript code:

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);
              }

            }

I am getting exception at

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

My requirement is on the load of Tab 'tabC1' the html attributes should be data-binded ( disabling and enabling of html fields )should happen.

I intially placed the CAPD related properties in 'MainviewModel' but the binding is not happening.

So i moved the C propeties from 'MainviewModel' to 'tabC1' load fucntion,but still the data-bind is not happening.

So i created a new viewmodel inside the 'tabC1' div load fucntion and trying to apply bindings on the load of div 'tabC1'.

Can some one guide if the approach is wrong or let me know how can i acheive it.

Here is the error details i am facing at

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

You're binding to organizationDetailsCAPDViewModel, which (as far as I can tell) does not contain a method named loadAutoProvision. Your HTML has a click: loadAutoProvision, so it will throw an error. Did you mean to extend the MainViewModel? — user3297291
My requirement is when the 'C' div is loaded which is in main view 'A',i want to bind items related to CAPD to 'tabc1' which is in another view 'Tabc' — AMDI
Although it's unclear to me what exactly you're trying to do, I can tell you're mixing up jQuery and knockout in an undesirable way... Look up knockout's template and with bindings. They allow you to inject HTML into the DOM that is data-bound to a sub-viewmodel. — user3297291
Sorry if you are not bale to understand.My requirement is I am loading a Main View which is having multiple tabs.OnLoad of one tab,I am loading another view which is having some knockout bindings.How can i bind the second view events in the main view js file — AMDI

AMDI AMDI · Accepted Answer · 2016-07-05T13:17:59

I found the solution for the above issue, I changed the line

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

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

Facing issue with knockout binding

1 Answers