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

【问题标题】：binding nested array data to view- knockout.js将嵌套数组数据绑定到 view-knockout.js
【发布时间】：2013-07-19 04:59:36
【问题描述】：

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

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

谁能帮我解决这个问题？

提前致谢。

【问题讨论】：

标签： knockout.js

【解决方案1】：

当你打电话时

SimpleSearchResultsObj.BindDataToQuotesDetailVM(this);

“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。它行不通。您必须为现有的 observables 赋值（见上文）。这是一个工作示例：http://jsfiddle.net/ynV35/

【讨论】：

谢谢！它帮助很大。