Question

更新：抱歉，忘记包含一些代码（面掌）。我把它包含在提供的初始代码中，所以一切都会清楚。我对这些东西真的很新，所以请原谅我没有时间学习jsfiddle（我知道它是什么，但是确实如此）。

每次表更新时，我都会发现排序切换的问题。我在代码中添加的sorting（）函数是new并调用method.sorting（）; getEvents（方法）函数内部解决了这个问题。但是，我仍然坚持刷新按钮的概念。

我注意到的另一个问题并且没有想出如何解决的问题是当我加载页面时，我必须等待第一个setInterval开始直到表填充。我如何解决这个问题，以便在页面最初加载时，它立即加载数据而不必等待setInterval中的指定时间？

最后一个问题：当表自动更新时，使用addRow（）函数添加的任何行都会消失，因为它们不是来自服务器的信息的一部分（不，我不能让行为填充到服务器）;如何使自动更新保留添加的行而不必将添加的行更新到服务器？

我有一个HTML表，它使用knockoutjs使用$.getJSON(http://.....)方法从服务器动态地将数据绑定到列中。我希望能够创建一个刷新按钮来刷新/更新表 - 而且只能创建表（I.E.不刷新整个页面）。

就像现在一样，该表使用js文件底部的setInterval()函数进行更新，但不断切换列排序。我无法弄清楚如何阻止它。

以下是此代码片段：

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>

继承人javascript viewmodel文件：

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

Answer 1

你应该看一下淘汰赛映射插件：

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

- 更新

另请参阅了解MVVM模式

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

Answer 2

我通过使表本身动态更新而不必依赖按钮来解决它。信息应该是只读的，所以编辑不是一个要考虑的因素。我还以某种方式得到它不撤消当前激活的排序。

通过将其添加到viewmodel中，我将表设置为在给定的间隔时间后更新：

var eventInterval = setInterval(function(){
    getEvents(this.Model);
), 5000); //<-- in milliseconds

创建HTML刷新按钮，仅刷新网页上的HTML表格中的信息

2 个答案: