binding nested array data to view- knockout.js

Question

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.

mael · Accepted Answer · 2013-07-19 06:19:48Z

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/

Collectives™ on Stack Overflow

binding nested array data to view- knockout.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related