While I have worked with this type of binding (using knockout.js) in the past without any issues, a new problem has come up today. Specifically:
I have a complex view model that consists of "parts" based on a certain process parameter. Although the entire view model is bound to the page, each process only utilizes its own parts. To simplify, imagine your view model looks like this:
{
1: Object (actual view model)
2: Object (actual view model)
3: Object (actual view model)
6: Object (actual view model)
getModelData = function(paramNumber) //returns the view model)
extractJSObject = function(paramNumber) //console.logs a "JS" object
}
The typical data-bind syntax in tutorials usually goes something like:
<input data-bind="value: displayedValue">However, the syntax I am using follows these rules:
<input data-bind="value: getModelData( processID ).DataSets. nameOfDataSet ()[ indexOfDataElement ]. fieldName">For example:
<input data-bind="value: getModelData(1).DataSets.Countries()[0].CountryPhoneCode">For some reason, this setup is not working now, even though it worked previously. The getModelData() function exists within a viewModel that is bound to the HTML and returns the necessary data. Don't be misled by this, it's a regular binding similar to any other object binding. However, it seems like there might be an issue somewhere along the way.
The image displays the console error message and my two lines of code which produce the expected output. I'm puzzled why manually typing in the console works correctly but the model struggles to bind itself.
https://i.stack.imgur.com/8HQtF.png
EDIT: Additionally, in the HTML, the binding does not match the error shown in the console. The actual binding appears as follows:
<input data-bind="value: getModelData(6).DataSets.HumanUser()[0].Address">