knockout.js и самый быстрый шаблонизатор

Question

Мне нужен более быстрый шаблонный движок, чем встроенный knockout.js. Какой самый быстрый и как его настроить? Какие-нибудь примеры в Интернете? Я думал о doT.js или руле. Я хочу дождаться JsRender, но производительность не выглядит на должном уровне.

Answer 1

Я узнал об этой ошибке, http://bugs.jqueryui.com/ticket/6757, и попросил кого-нибудь ответить на нее по другой проблеме, которая ее исправила.

Knockout.js и большой набор данных также замедляют работу выпадающего списка

Answer 2

Я создал привязку специально для быстрой генерации таблиц: https://github.com/mbest/knockout-table.

Answer 3

Этот ответ больше не точен. 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();
}

Поскольку это перерисовает всю таблицу, это, вероятно, не то, что вы хотите. Лучшим способом были бы изменяемые элементы 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 привязка не обновляется, и вы только повторно отображаете измененные строки.

Было бы круто, если нокаут обеспечит более мощный observableArray а также foreach реализация обработчика привязки, которая не требует повторного отображения всего шаблона при изменениях. До тех пор это ваш лучший выбор, если вы хотите придерживаться нокаута.