CODEWITHSUNDEEP
knockout.js
user2439903
user2439903

Reputation: 1307

binding nested array data to view- knockout.js

I have an array called simpleSearchResultsArray in main viewModel -QuoteSimpleSearchVM.

The array simpleSearchResultsArray contains SimpleSearchResults objects.

Inside each SimpleSearchResults there is an object called quoteDetailsObj defined. The data is added to the quoteDetailsObj. And the object quoteDetailsObj is bound to the view. I am not able to bind this nested array viewmodel to the view. Here is the link for the jsfiddle: http://jsfiddle.net/FENuV/29/

View code: 

<div id="QdetailsDiv">
    <div>
        <div>
            <div><span>Sold to Account</span></div>
            <div>
                <input type="text" id="txtSoldToAccount" data-bind="value:SoldToAccount"/>
            </div>
        </div>
        <div>
            <div><span>Job Name</span></div>
            <div>
                <input type="text" id="txtQDJobName"  data-bind="value:jobName"/></div>
        </div>
    </div>
    <input type="button" value="unbind" id="unbindbutton"></input>
</div>

ViewModel code:

QuoteDetails = function () {
    var self = this;
    self.SoldToAccount = ko.observable();
    self.jobName = ko.observable();
};

function SimpleSearchResults() {
    var self = this;
    self.index = ko.observable();
    self.quoteDetailsObj= null; 

    self.BindDataToQuotesDetailVM = function (SimpleSearchResultsObj) {
        SimpleSearchResultsObj.quoteDetailsObj = ko.observable(new QuoteDetails()); 
        SimpleSearchResultsObj.quoteDetailsObj.SoldToAccount = ko.observable("SoldToAccount test");        
        SimpleSearchResultsObj.quoteDetailsObj.jobName = ko.observable("jobName test");
        ko.applyBindings(SimpleSearchResultsObj.quoteDetailsObj, document.getElementById("QdetailsDiv"));
    };
};

function QuoteSimpleSearchVM() {

    var self = this;
    self.simpleSearchResultsArray = ko.observableArray([]);

    var SimpleSearchResultsObj= new SimpleSearchResults();
    SimpleSearchResultsObj.index=ko.observable("1");
    self.simpleSearchResultsArray.push(SimpleSearchResultsObj);    

    var SimpleSearchResultsObj2= new SimpleSearchResults();
    SimpleSearchResultsObj2.index=ko.observable("2");
    self.simpleSearchResultsArray.push(SimpleSearchResultsObj2);    

};
 var obj= new QuoteSimpleSearchVM();
$(document).ready(function () {

    $("#unbindbutton").click(function(){
        var element = $('#QdetailsDiv')[0];
        ko.cleanNode(element);
    });    

    ko.utils.arrayForEach(obj.simpleSearchResultsArray(), function (SimpleSearchResultsObj) {             
                if (SimpleSearchResultsObj.index() === "2") {
                    SimpleSearchResultsObj.BindDataToQuotesDetailVM(this);
                }
            });
});

Can anyone help me solve this issue?

Thanks in advance.

Upvotes: 0

Views: 139

Answers (1)

mael
mael

Reputation: 2254

When you call 

SimpleSearchResultsObj.BindDataToQuotesDetailVM(this);

"this" is referring to the window, I don't think that's what you want to do. As I suppose you want to refer to the current "SimpleSearchResults", why not just use "self" in BindDataToQuotesDetailVm?

self.BindDataToQuotesDetailVM = function () {
    self.quoteDetailsObj = new QuoteDetails(); 
    self.quoteDetailsObj.SoldToAccount("SoldToAccount test");        
    self.quoteDetailsObj.jobName("jobName test");
    ko.applyBindings(self.quoteDetailsObj, document.getElementById("QdetailsDiv"));
};

Furthermore, what you're doing in "BindDataToQuotesDetailVm" is wrong. "QuoteDetails" declares observable, and you're reassigning new observable in the function. It won't work. You have to give a value to the existing observables (see above). Here is a working example: http://jsfiddle.net/ynV35/

Upvotes: 1

Related Questions