Question

我需要一个更快的模板引擎，然后是内置的knockout.js。什么是最快的，你如何设置它？网上有什么例子吗？我一直在想doT.js或把手。我想等待JsRender，但表现并不像标准杆。

Answer 1

我专门为快速表生成创建了一个绑定：https://github.com/mbest/knockout-table。

Answer 2

这个答案不再准确。 Knockout 2.2现在支持通过foreach绑定重新排序元素。

knockout和observableArray的主要问题是修改数组的所有操作都会导致完全重新呈现foreach绑定下的元素。如果这成为性能瓶颈，你可以通过不移动行而是复制它们的值来解决这个问题。

在每次更改时重新呈现整个foreach的显而易见的方法如下：

function Row(value) {
    this.value = value;
}
var model = {
    rows = ko.observableArray([new Row(1), new Row(2), new Row(3), new Row(4), new Row(5)])
}
function move(index, insertionIndex) {
    var rows = models.rows();
    // TODO Insert some clever code here
    // - remove row from rows array
    // - insert row at insertionIndex into rows array
    rows.valueHasMutated();
}

因为这会重绘整个表格，这可能不是你想要的。更好的方法是支持复制的可变Row元素：

function Row(value) {
    this.value = ko.observable(value);
}
Row.prototype.copyFrom(anotherRow) {
    this.value(anotherRow().value());
}
Row.prototype.swap(anotherRow) {
    var tmp = this.value();
    this.value(anotherRow.value());
    anotherRow.value(tmp);
}
var model = {
    rows = ko.observableArray([new Row(1), new Row(2), new Row(3), new Row(4), new Row(5)])
}
function move(index, insertionIndex) {
    var rows = models.rows();
    var tmp = new Row();
    tmp.copyFrom(rows[index]) // save the current row
    if (index < insertionIndex) {
        // move row down -> move other rows up
        for (var i=index; i<insertionIndex; i++) {
            rows[i].copyFrom(rows[i+1])
        }
    } else {
        // move row up -> move other rows down
        for (var i=index; i>insertionIndex; i--) {
            rows[i].copyFrom(rows[i-1])
        }
    }
}

请注意，您不必再使用rows.valueHasMutated()，因为您没有修改数组，而是更改Row个对象。因此，foreach绑定不会更新，您只会重新渲染已更改的行。

如果knockout会提供更强大的observableArray和foreach绑定处理程序实现，而不需要在更改时重新呈现整个模板，那将会很酷。在此之前，如果您想坚持使用Knockout，这是您最好的选择。

Answer 3

我发现了这个错误，http://bugs.jqueryui.com/ticket/6757，并且有人在解决另一个修复它的问题时回答了它。

Knockout.js and large dataset makes dropdown list slow also

knockout.js和最快的模板引擎

3 个答案: