将嵌套数组数据绑定到view- knockout.js

时间:2013-07-19 04:59:36

标签: knockout.js

我在主viewModel中有一个名为 simpleSearchResultsArray 的数组 - QuoteSimpleSearchVM

数组 simpleSearchResultsArray 包含 SimpleSearchResults 对象。

在每个 SimpleSearchResults 中,定义了一个名为 quoteDetailsObj 的对象。 数据将添加到 quoteDetailsObj 。对象 quoteDetailsObj 绑定到视图。 我无法将此嵌套数组视图模型绑定到视图。 以下是jsfiddle的链接:http://jsfiddle.net/FENuV/29/

查看代码:

<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代码:

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

有人可以帮我解决这个问题吗?

提前致谢。

1 个答案:

答案 0 :(得分:1)

致电时

SimpleSearchResultsObj.BindDataToQuotesDetailVM(this);

“这个”是指窗口,我不认为这是你想要做的。我想你想引用当前的“SimpleSearchResults”,为什么不在BindDataToQuotesDetailVm中使用“self”?

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

此外,您在“BindDataToQuotesDetailVm”中所做的事情是错误的。 “QuoteDetails”声明了可观察性,并且你在函数中重新分配了新的observable。它不会起作用。您必须为现有的observable提供一个值(参见上文)。这是一个工作示例:http://jsfiddle.net/ynV35/