Reputation: 973
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
Upvotes: 0
Views: 113
Reputation: 973
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]);
Upvotes: 1