0

我有 3 个单独的 div。第一个 div 绑定到主视图模型- QuoteSimpleSearchVM

第二个div QdetailsDiv绑定到主视图模型- QuoteSimpleSearchVM

第三个 div LineItemresult绑定到 对象 SimpleSearchResults 中的 observableArray ProductDetailsArrObj 。

主视图模型——QuoteSimpleSearchVM 有一个可观察的数组——simpleSearchResultsArray。在选择 simpleSearchResultsArray 的数组元素之一时，调用方法 BindDataToQuotesDetailVM 和 BindProductsDetails。BindProductsDetails 方法填充数组 - ProductDetailsArrObj。

假设我选择了第一个 simpleSearchResultArray 元素，那么simpleSearchResultArray()[0].ProductDetailsArrObj必须绑定到 div- LineItemresult

所以整个结构看起来像：

QuoteSimpleSearchVM --> simpleSearchResultsArray()[0] --> ProductDetailsArrObj.

如何绑定查看simpleSearchResultsArray()[0]？ProductDetailsArrObj我在其他场景中使用过$root& 。$parent无法针对当前方案解决此问题。

将可观察数组ProductDetailsArrObj绑定到视图时出现错误。这是查看代码：

<div id="searchResultQuotes" data-bind="visible: $root.showResultTable">
    <div id="resultTable">
        <table id="my-table">
            <thead id="resultTableHeader">
                <tr data-bind="foreach: gridOptions.columns">
                    <th data-bind="visible: checked, text: header">
                    </th>
                </tr>
            </thead>
            <tbody id="resultTableBody" data-bind="foreach: simpleSearchResultsArray">
                <tr>
                    <td>
                        <span data-bind="text: $index()+1"></span>
                    </td>
                    <td>
                        <span data-bind="text: jobName"></span>
                    </td>
                    <td>
                        <span data-bind="text:qName"></span>
                    </td>
                    <td>
                        <a  style="margin-left: auto; margin-right: auto; border: none; background: transparent;box-shadow: none;" data-role="button" data-icon="table_view" data-iconpos="notext" style="text-decoration: none; top: 1%" data-bind="click:function(){ $root.ShowQuotesDetails(qName);}"></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


<div id="QdetailsDiv" >
    <div>
        <div>
            <div>
                <span>Job Name</span></div>
            <div>
                <input type="text" id="txtQDJobName" data-bind="value:jobName" /></div>
        </div>
        <div>
            <div>
                <span>Scenarios</span></div>
            <div>
                <input type="text" id="txtScenarioDescription" data-bind="value:scenarios" /></div>
        </div>
    </div>
</div>

<div id="LineItemresult">
    <div class="result">
        <table>
            <thead>
                <tr>
                    <th style="text-align: center">
                        <b>column 1</b>
                    </th>
                    <th style="text-align: center">
                        <b>column 2</b>
                    </th>
                    <th style="text-align: center">
                        <b>column 3</b>
                    </th>
                </tr>
            </thead>
            <tbody id="LineItemTemplateBody" data-bind="foreach: ProductDetailsArrObj">
                <tr>
                    <td>
                        <span data-bind="text:Line"></span>
                    </td>
                    <td>
                        <span data-bind="text:HighLevel"></span>
                    </td>
                    <td>
                        <span data-bind="text:Designation"></span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

查看模型代码：

ProductDetails = function () {
    var self = this;
    self.Line = ko.observable();
    self.HighLevel = ko.observable();
    self.Designation = ko.observable();  
};

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

function SimpleSearchResults() {
    var self = this;
    self.index = ko.observable();
    self.jobName = ko.observable();
    self.qName = ko.observable();
    self.view = ko.observable();

    self.quoteDetailsObj = new QuoteDetails();
    self.ProductDetailsArrObj = ko.observableArray([]);

    self.BindProductsDetails = function () {
        var tempArray = [];
        console.log(self.ProductDetailsArrObj());
        var data=[{itemNumber:'1',highLevelItem:'HL1',designation:'1'}, {itemNumber:'2',highLevelItem:'HL2',designation:'2'}, {itemNumber:'3',highLevelItem:'HL3',designation:'3'}];

        for (var k = 0; k < data.length; k = k + 1) {
            var tempProdDetails = new ProductDetails();
            tempProdDetails.Line(data[k].itemNumber);
            tempProdDetails.HighLevel(data[k].highLevelItem);
            tempProdDetails.Designation(data[k].designation);
            tempArray.push(tempProdDetails);
        }
        console.log(tempArray.length);
       self.ProductDetailsArrObj(tempArray);
        ko.applyBindings(self.ProductDetailsArrObj, document.getElementById("LineItemresult"));
    };

    self.BindDataToQuotesDetailVM = function () {
        self.quoteDetailsObj.jobName("job name 1");
        self.quoteDetailsObj.scenarios("scenario 1");
        ko.applyBindings(self.quoteDetailsObj, document.getElementById("QdetailsDiv"));
       self.BindProductsDetails();
    };
};

function QuoteSimpleSearchVM() {
    var self = this;
    self.showResultTable = ko.observable(false);
    self.showQuoteDetails= ko.observable(false);

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

     self.gridOptions = {
        columns: [{
            header: 'Index',
            dataMember: 'index',
            checked: ko.observable(true)
        }, {
            header: 'Job Name',
            dataMember: 'jobName',
            checked: ko.observable(true)
        }, {
            header: 'Quote Name',
            dataMember: 'qName',
            checked: ko.observable(true)
        }, {
            header: 'Quote Number',
            dataMember: 'quoteNumber',
            checked: ko.observable(true)
        }]
     };

    self.Search = function () { 
        var temparray = [];
        self.showResultTable("true");
        var data=[{jobName: 'job 1', documentName: 'quote name 1'}, {jobName: 'job 2', documentName: 'quote name 2'}, {jobName: 'job 3', documentName: 'quote name 3'}];

        for (var k = 0; k < data.length; k = k + 1) {
            var temp = new SimpleSearchResults();
            temp.index = k + 1;
            temp.jobName = data[k].jobName;
            temp.qName = data[k].documentName;
            temparray.push(temp);
        }
        self.simpleSearchResultsArray(temparray);
        if (data.length > 0) {
            self.showResultTable(true);
        }
        ko.applyBindings(QuoteSimpleSearchVMObj, document.getElementById("QdetailsDiv"));
    };

    self.ShowQuotesDetails= function(quoteName){ 
        self.showResultTable("false");
        self.showQuoteDetails("true");
        ko.utils.arrayForEach(self.simpleSearchResultsArray(), function (SimpleSearchResultsObj) {
                if (SimpleSearchResultsObj.qName == quoteName) { 
                    SimpleSearchResultsObj.BindDataToQuotesDetailVM();
                }
            })   
    };
};

var QuoteSimpleSearchVMObj;
$(document).ready(function () {
    QuoteSimpleSearchVMObj = new QuoteSimpleSearchVM();
    ko.applyBindings(QuoteSimpleSearchVMObj, document.getElementById("searchResultQuotes"));

     QuoteSimpleSearchVMObj.Search();
});

QuoteSimpleSearchVM- 是主视图模型。

单击 + 登录视图，作业名称、场景和列与视图模型数据绑定，调用方法 BindDataToQuotesDetailVM、BindProductsDetails 来绑定数据。我收到一个参考错误：无法解析绑定。消息：ReferenceError：未定义 ProductDetailsArrObj；绑定值：foreach：ProductDetailsArrObj

谁能帮我解决这个问题？相同的 jsfiddle 链接：http: //jsfiddle.net/ynV35/45/

4

1 回答 1

1

将 viewModel 绑定到 HTML 使其在淘汰赛上下文中成为 $root 并且它的变量和方法变为 $data。你不能再直呼它的名字了。在这种情况下，绑定到 div 的 viewModel 部分是一个数组的解决方案是使用foreach: $data而不是foreach: ProductDetailsArrObj.

更新前的旧答案

这是淘汰赛中最常见的错误。简单的错误输入、名称或结构更改会导致无法解析绑定的消息。你必须学会​​自己解决这个问题，否则你不会走远。KO 可以很好地为您提供一个您应该在 HTML 中搜索的变量名称。

您的 ProductDetailsArrObj 位于另一个对象 SimpleSearchResults 内，因此它应该与命名空间中的完整路径或 foreach 循环内的完整路径一起使用，因为 SimpleSearchResults 是一个项目数组。你说 HTML 绑定了不同的视图，但是你的 JS 说的是不同的东西。

这在淘汰赛中称为上下文。您可以在 KO 文档中了解更多信息：http: //knockoutjs.com/documentation/binding-context.html

于 2013-07-29T09:43:35.943 回答