如何绑定< ul>具有新的viewmodel数据的元素? -Knockout.js [英] How to bind the <ul> elements with new viewmodel data? - knockout.js

问题描述

我有一个用新数据更新视图的要求. 这是该视图的代码:

I have a requirement where the view gets updated with new data. Here is the code for the view:

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

});

多次调用在视图模型中搜索"方法，每次单击都会在视图模型中更新新数据.在视图中必须进行相同的更新.

The method Search in view model is called many times, on click of each time, there is new data which is updated in the view model. The same has to updated in the view.

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

My problem is, the first time view model is bound to the view, the data appears correct. Suppose the first time the ul in the view has 3 li's - the data is bound correct.

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

The next time i click Search, there is new data in View model, suppose the ul has two li's the second time, the data is bound 6 times in the view. Each li appearing thrice since the first seach had created 3 li's. How to solve this issue?

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

Hope i am clear with the question. Let me know if any more details is needed.

jsfiddle的链接: http://jsfiddle.net/KRyXR/91/ 链接不会复制情况.试图弄清楚我的问题.认为 data1 是第一次搜索时绑定的数据，而 data2 是第二次单击时绑定的数据.

The link for jsfiddle: http://jsfiddle.net/KRyXR/91/ The link doesn't replicate the situation. Trying to make my problem clear. Consider data1 to be the data bound during first search, and data2 to be the data bound on clicking second time.

谢谢.

推荐答案

使用剔除功能，您无需在每次模型修改时都重新绑定视图. 这意味着您无需在每次搜索时都调用此方法:

With knockout you don't need rebind the view on each model modification. That's mean you don't need to call this on each search :

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

只需调用可观察对象的设置者"，视图就会改变.

Just call the "setter" of the observable and the view will changed.

 self.simpleSearchResultsArray(temparray);

我更新了您的小提琴，在其中只绑定了一次. 我将整个viewmodel绑定到整个表格.

I updated your fiddle in which I just bind only one times. I bound the whole viewmodel the whole table.

希望对您有帮助.

请参见小提琴

See fiddle

这篇关于如何绑定< ul>具有新的viewmodel数据的元素? -Knockout.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！