1

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

<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里- 数据绑定正确。

下次我点击搜索，View模型中有新数据，假设第二次ul有两个li，数据在视图中绑定了6次。自从第一次搜索以来，每出现三次li就创造了 3 li's。如何解决这个问题？

希望我对这个问题很清楚。让我知道是否需要更多详细信息。

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

提前致谢。

4

1 回答 1

2

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

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

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

 self.simpleSearchResultsArray(temparray);

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

我希望它有所帮助。

见小提琴

于 2013-07-23T08:49:46.320 回答