绑定数组数据以查看模型-knockout.js答案

【问题标题】：bind array data to view model- knockout.js绑定数组数据以查看模型-knockout.js
【发布时间】：2013-07-23 17:48:24
【问题描述】：

视图模型有一个可观察的数组simpleSearchResultsArray，点击bind data 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 = [];

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

            for (var k = 0; k < data1.length; k = k + 1) {
                var temp = new SimpleSearchResults();
                temp.index = k + 1;
                temp.jobName = data1[k].jobName;
                temp.qName = data1[k].documentName;
                temparray.push(temp);
            }
            self.simpleSearchResultsArray = ko.observableArray([]);
            self.simpleSearchResultsArray = ko.observable(temparray);
        alert("1");
    }

    self.UpdateData = function()
    {
        var temparray=[];
        var data2=  [{jobName: 'c', documentName: 'Quote2'},{jobName: 'd', documentName: 'Quote4'}];
         for (var k = 0; k < data2.length; k = k + 1) {
                var temp = new SimpleSearchResults();
                temp.index = k + 1;
                temp.jobName = data2[k].jobName;
                temp.qName = data2[k].documentName;
                temparray.push(temp);
            }
            self.simpleSearchResultsArray = ko.observableArray([]);
            self.simpleSearchResultsArray = ko.observable(temparray);
        alert(2);
    };
};

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

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

     $("#bindData2").click(function(){
        QuoteSimpleSearchVMObj.UpdateData();
    });

});

如何在点击绑定数据1按钮和绑定数据2按钮时更新视图？

【问题讨论】：

首先，不应该使用jQuery，不应该使用敲除'click'绑定来绑定按钮吗？
是的，可以。我已经使用淘汰赛点击绑定绑定它。 jsfiddle 只是为复制问题而创建的一个示例
我有它的工作，检查我的解决方案的 jsfiddle URL

标签： knockout.js

【解决方案1】：

用 div 包裹整个 html。

并像这样修改js：

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

});

这样的html：

<div id="myDiv">
    <table>
        <thead id="resultTableHeader" data-bind="with: gridOptions">
         ...  
     </table>
     <button data-bind="click: Search">bind data 1</button>
     <button data-bind="click: UpdateData">bind data 2</button>
</div>

刷新问题见your other question，替换：

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

作者：

 self.simpleSearchResultsArray(temparray);

希望对你有帮助。

【讨论】：

【解决方案2】：

问题似乎源于您用 observablearray 和 observable 覆盖 ObservableArray。

这在 jsfiddle (http://jsfiddle.net/TpSny/1/) 中对我有用：

self.UpdateData = function(){
  self.simpleSearchResultsArrayremoveAll(); // *** clear the array ***

  var data2=  [{jobName: 'c', documentName: 'Quote2'},{jobName: 'd', documentName: 'Quote4'}];
  for (var k = 0; k < data2.length; k = k + 1) {
    var temp = new SimpleSearchResults();
    temp.index = k + 1;
    temp.jobName = data2[k].jobName;
    temp.qName = data2[k].documentName;

    simpleSearchResultsArrayremoveAll.push(temp); // *** Add to the array ***
  }
  alert(2);
};

你会为其他功能做同样的事情。

【讨论】：