0

ビュー モデルには、バインド データ 1 ボタンをクリックすると入力される観測可能な配列simpleSearchResultsArrayがあります。 ドキュメントの読み込み時にバインディングを適用しています。ボタンをクリックすると、ビューモデルは更新されますが、ビューは更新されません。

ビューコードは次のとおりです。

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

});

bind data 1 ボタンとbind data 2 ボタンのクリックでビューを更新するにはどうすればよいですか?

4

2 に答える 2

0

html 全体を div で囲みます。

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>

更新の問題に関する他の質問を参照して、次を置き換えます。

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

に ：

 self.simpleSearchResultsArray(temparray);

お役に立てば幸いです。

于 2013-07-23T08:58:45.337 に答える