如何将 <ul> 元素与新的视图模型数据绑定？ - 淘汰赛.js答案

【问题标题】：How to bind the <ul> elements with new viewmodel data? - knockout.js如何将 <ul> 元素与新的视图模型数据绑定？ - 淘汰赛.js
【发布时间】：2013-07-23 16:49:46
【问题描述】：

我有一个使用新数据更新视图的要求。这是视图的代码：

<table>
    <thead id="resultTableHeader">
        <tr style="text-align: center" data-bind="foreach: columns">
            <th style="text-align: center; height: 23px;" data-bind="visible: checked, text: header">
            </th>
         </tr>
    </thead>
    <tbody id="resultTableBody" data-bind="foreach: simpleSearchResultsArray">
        <tr>
            <td style="text-align: center; vertical-align: middle;">
                <span data-bind="text: $index()+1"></span>
            </td>
            <td style="text-align: center; vertical-align: middle;">
                <span data-bind="text: jobName"></span>
             </td>
             <td style="text-align: center; vertical-align: middle;">
                <span data-bind="text:qName"></span>
             </td>
        </tr>
    </tbody>
</table>
<button id="bindData1">bind data 1</button>
<button id="bindData2">bind data 2</button>

相同的视图模型：

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

function QuoteSimpleSearchVM() {
    var self = this;
    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)
        }
       ]
    };

    self.Search = function (num) {
        var temparray = [];
        var bindData= [];

        // data1 and data2 to consider as info from service 
        var data1=  [{jobName: 'a', documentName: 'Quote1'},{jobName: 'b', documentName: 'Quote2'}];
        var data2=  [{jobName: 'c', documentName: 'Quote2'},{jobName: 'd', documentName: 'Quote4'}];

        if(num=="1") 
            bindData= data1;
        else
            bindData= data2;
        console.log(bindData);
            for (var k = 0; k < bindData.length; k = k + 1) {
                var temp = new SimpleSearchResults();
                temp.index = k + 1;
                temp.jobName = bindData[k].jobName;
                temp.qName = bindData[k].documentName;
                temparray.push(temp);
            }
            self.simpleSearchResultsArray = ko.observableArray([]);
            self.simpleSearchResultsArray = ko.observable(temparray);
        ko.applyBindings(QuoteSimpleSearchVMObj, document.getElementById("resultTableBody"));
    }
};

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

    $("#bindData1").click(function(){
     alert("1");
        QuoteSimpleSearchVMObj.Search("1");
    });

     $("#bindData2").click(function(){
         alert("2");
        QuoteSimpleSearchVMObj.Search("2");
    });

});

视图模型中的方法Search被多次调用，每次点击，视图模型中都会有新的数据被更新。同样必须在视图中更新。

我的问题是，第一次将视图模型绑定到视图时，数据显示正确。假设第一次视图中的 ul 有 3 个 li's - 数据绑定正确。

下次点击搜索，View模型中有新数据，假设第二次ul有两个li的，数据绑定6次看法。自第一次搜索以来出现三次的每个 li 都创建了 3 个 li。如何解决这个问题？

希望我对这个问题很清楚。如果需要更多详细信息，请告诉我。

jsfiddle 的链接：http://jsfiddle.net/KRyXR/91/ 该链接不会复制这种情况。试图让我的问题清楚。考虑 data1 为第一次搜索时绑定的数据，data2 为第二次点击时绑定的数据。

提前致谢。

【问题讨论】：

标签： knockout.js

【解决方案1】：

使用淘汰赛，您无需在每次修改模型时重新绑定视图。这意味着您不需要在每次搜索时都调用它：

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

只需调用 observable 的“setter”，视图就会改变。

 self.simpleSearchResultsArray(temparray);

我更新了你的小提琴，我只绑定了一次。我将整个视图模型绑定到整个表格。

希望对你有帮助。

See fiddle

【讨论】：