0

更新：申し訳ありませんが、コードの一部（face-palm）を含めるのを忘れました。提供された初期コードに含めたので、すべてが明確になります。私はこのようなものに本当に慣れていないので、今jsfiddleを学ぶ時間がないことを許してください（私はそれが何であるかを知っていますが）。

テーブルが更新されるたびにソートが切り替わる問題を理解しました。私がコードに入れたsorting（）関数は新しく、method.sorting（）を呼び出していました。getEvents（method）関数の内部で問題が解決しました。しかし、私はまだ更新ボタンの概念に固執しています。

私が気づき、解決方法を理解していないもう1つの問題は、ページをロードするときに、テーブルが作成されるまで最初のsetIntervalが開始するのを待たなければならないことです。これを回避して、ページが最初に読み込まれるときに、setInterval内で指定された時間待つことなく、すぐにデータを読み込むようにするにはどうすればよいですか？

最後の問題：テーブルが自動更新されると、addRow（）関数を使用して追加された行は、サーバーからの情報の一部ではないために表示されなくなります（いいえ、行をに入力することはできません）サーバ）; 追加された行をサーバーに更新せずに、自動更新で追加された行を残しておくにはどうすればよいですか？

このメソッドを使用して、knockoutjsを使用し、サーバーから動的にデータを列にバインドするHTMLテーブルがあります$.getJSON(http://.....)。テーブルを更新/更新するための更新ボタンを作成できるようにしたいと思います。テーブルのみを更新します（つまり、ページ全体を更新しません）。

現在のように、テーブルsetInterval()はjsファイルの下部にある関数を使用して更新されますが、列の並べ替えを切り替え続けます。これを止める方法がわかりません。

これに必要なコードスニペットは次のとおりです。

HTMLファイル：

<table border="6" id="widget"><thead>
    <tr>
        <th><a href=#" data-bind="click: SortByTimeObserved">TimeObserved</a></th>
    </tr></thead>

    <tbody data-bind="foreach: rows">
        <td><input data-bind="value: TimeObserved, valueUpdate: 'change' " /></td>
    </tbody>
</table>
<div>
    <button date-bind="click: addRow, enable: rows()">Add Row</button>
</div>
<script src="TableViewModel.js" type="text/javascript"></script>

javascriptviewmodelファイルは次のとおりです。

function Event(TimeObserved){
    var self = this;
    self.TimeObserved = TimeObserved;
}

function TableViewModel(){
    var self = this;
    self.sortColumn = ko.observable("TimeObserved");
    self.sortAscending = ko.observable(true);

    self.addRow = function(){
        self.rows.push(new Event(""));
    }        

    self.SortByTimeObserved(){
        if(self.sortColumn == "TimeObserved")
            self.sortAscending = !self.sortAscending;
        else{
            self.sortColumn = "TimeObserved";
            self.sortAscending = true;
        }
        self.rows.sort(function(a,b){
            if(self.sortAscending == true)
                for(self.TimeObserved in self.rows)
                    return a.TimeObserved > b.TimeObserved ? -1 : 1;
             else
                 return a.TimeObserved < b.TimeObserved ? -1 : 1;
        });
    }
    self.sorting = function(){
        if(self.sortColumn() = "TimeObserved"){
            self.rows.sort(function(a,b){
                if(self.sortAscending() == true)
                  for(self.TimeObserved in self.rows)
                    return a.TimeObserved > b.TimeObserved ? 1 : a.TimeObserved < b.TimeObserved ? -1 : 0;
                else
                    return a.TimeObserved < b.TimeObserved ? 1 : a.TimeObserved > b.TimeObserved ? -1 : 0;
            }
        }
}
//Access the server and pulls the info from it.  I also apply my sorting() method to initially sort the info here.
function getEvents(model){
    $.getJSON("http://mywebpage.com", 
        function (data){
            model.rows([]);
            $.each(data.d, function(i,item){
                hendleEvent(item)
            });
            model.sorting();
        }
    );
}

//Populates the rows of the table with the info from the server I.E. item."infoIwant"
function handleEvent(item){
    var newEvent = new Event(item.TimeObserved);
    this.Model.rows.push(newEvent);    
}

this.Model = new TableViewModel();
var eventInterval = setInterval(function(){
    getEvents(this.Model);
    }, 5000);
ko.applyBindings(this.Model);
4

2 に答える 2

0

ノックアウトマッピングプラグインを確認する必要があります。

http://knockoutjs.com/documentation/plugins-mapping.html

- アップデート

また、MVVMパターンの理解もご覧ください

http://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/

于 2012-04-20T16:09:25.580 に答える
0

ボタンに頼るのではなく、テーブル自体を動的に更新することで解決しました。とにかく情報は読み取り専用であると想定されているため、編集は考慮すべき要素ではありません。また、アクティブになっている現在の並べ替えを元に戻さないようにしました。

これをビューモデルに追加することで、指定された間隔時間後に更新するようにテーブルを設定します。

var eventInterval = setInterval(function(){
    getEvents(this.Model);
), 5000); //<-- in milliseconds
于 2012-05-07T19:31:06.833 に答える