performance - knockout.js と最速のテンプレート エンジン

Question

組み込みの knockout.js よりも高速なテンプレート エンジンが必要です。何が最速で、どのように設定しますか? ウェブ上の例はありますか？私はdoT.jsまたはハンドルバーを考えてきました。JsRender を待ちたいのですが、パフォーマンスが標準に達していません。

Answer 1

I created a binding specifically for fast table generation: https://github.com/mbest/knockout-table.

Answer 2

この答えはもはや正確ではありません。Knockout 2.2は、foreachバインディングを介した要素の並べ替えをサポートするようになりました。

ノックアウトとの主な問題は、配列を変更するすべての操作により、バインディング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();
}

これによりテーブル全体が再描画されるため、これはおそらくあなたが望むものではありません。より良い方法は、コピーをサポートする可変の行要素です。

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バインディングは更新されず、変更された行を再レンダリングするだけです。

ノックアウトが、変更時にテンプレート全体を再レンダリングする必要のない、より強力observableArrayでバインディングハンドラーの実装を提供するのであれば、すばらしいでしょう。foreachそれまでは、ノックアウトを使い続けたい場合は、これが最善の策です。