0

更新：对不起，忘记包含一些代码（掌心）。我将它包含在提供的初始代码中，所以一切都会很清楚。我对这些东西真的很陌生，所以请原谅我现在没有时间学习 jsfiddle（虽然我知道它是什么并且做了什么）。

我已经发现每次表格更新时排序切换的问题。我放入代码中的sorting() 函数是新的并且调用method.sorting(); getEvents(method) 函数内部解决了这个问题。但是，我仍然坚持刷新按钮的概念。

我注意到但还没有弄清楚如何解决的另一个问题是，当我加载页面时，我必须等待第一个 setInterval 开始，直到表格填充。我该如何解决这个问题，以便在页面最初加载时，它会立即加载数据，而无需在 setInterval 内等待指定的时间？

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

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

就像现在一样，表格使用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>

继承人的 javascript 视图模型文件：

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

我通过使表格本身动态更新而不必依赖按钮来解决它。无论如何，该信息应该是只读的，因此编辑不是要考虑的因素。我也不知何故让它不撤消当前激活的排序。

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

var eventInterval = setInterval(function(){
    getEvents(this.Model);
), 5000); //<-- in milliseconds
于 2012-05-07T19:31:06.833 回答
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 回答