Knockout.js: обновить привязки?

Каждый раз, когда вы вызываете ko.applyBindings, вся модель DOM проверяется на наличие привязок. В результате вы получите несколько привязок для каждого элемента, если сделаете это более одного раза. Если вы просто хотите связать новый элемент DOM, вы можете передать этот элемент в качестве параметра функции applyBindings:

ko.applyBindings(viewModelA, document.getElementById("newElement"));

См. этот связанный вопрос:

Можете ли вы вызвать ko.applyBindings для привязки частичного представления?

Не зная, чем именно вы занимаетесь, кажется, что вы идете неправильным путем. Ваше представление должно управляться вашей моделью представления. Таким образом, вы не должны напрямую добавлять элементы DOM, к которым затем нужно применить нокаутирующие привязки.

Вместо этого вы должны обновить свою модель представления, чтобы отразить изменение в представлении, что затем приведет к появлению вашего нового элемента.

Так, например, для вашего $('body').append('<a href="#" data-bind="click: something">Click me!</a>'); вместо добавления элемента DOM, когда кнопка должна быть видимой, управляйте видимостью кнопки с помощью модели представления.

Итак, ваша модель представления включает

var viewModel = { clickMeAvailable: ko.observable(false) }

И ваш HTML включает

<a href="#" data-bind="click: something, visible: clickMeAvailable">Click me!</a>

Когда состояние приложения изменится, и кнопка «Нажми меня» станет доступной, вы просто viewModel.clickMeAvailable(true).

Смысл этого, и большая часть нокаута, состоит в том, чтобы отделить бизнес-логику от представления. Таким образом, код, который делает доступным click me, не заботится о том, что click me включает в себя кнопку. Все, что он делает, это обновляет viewModel.clickMeAvailable, когда доступен click me.

Например, скажем, нажмите на меня — это кнопка сохранения, которая должна быть доступна, когда форма заполнена корректно. Вы бы привязали видимость кнопки сохранения к наблюдаемой модели представления formValid.

Но затем вы решаете что-то изменить, поэтому после того, как форма станет действительной, появится юридическое соглашение, с которым необходимо согласиться перед сохранением. Логика вашей формы не меняется - она ​​по-прежнему устанавливает formValid, когда форма действительна. Вы бы просто изменили то, что происходит при изменении formValid.

Как указывает Лассомбра в комментариях к этому ответу, бывают случаи, когда лучшим подходом может быть прямое манипулирование DOM — например, сложная динамическая страница, на которой вы хотите увлажнять только части представления по мере необходимости. Но вы отказываетесь от части разделения интересов, которое обеспечивает Knockout, делая это. Будьте внимательны, если вы планируете пойти на этот компромисс.

Я только что наткнулся на аналогичную проблему. Я попытался добавить новые элементы в контейнер и дать им функцию onclick.

Сначала попробовал то, что вы сделали, и даже попробовал подход ColinE рекомендуется. Это не было для меня практичным решением, поэтому я попробовал подход SamStephens и нашел его, который отлично работает для меня:

HTML:

<div id="workspace" data-bind="foreach:nodeArr, click:addNode">
<div class="node" data-bind="attr:{id:nodeID},style:{left:nodeX,top:nodeY},text:nodeID, click:$parent.changeColor"></div>
</div>

JavaScript:

<script>
function ViewModel() {
var self = this;
var id = 0;
self.nodeArr = ko.observableArray();
self.addNode = function (data, event) {
    self.nodeArr.push({
        'nodeID': 'node' + id,
        'nodeX' : (event.offsetX - 25) + 'px',
        'nodeY' : (event.offsetY - 10) + 'px'
    })
    id++;
}
self.changeColor = function(data, event){
    event.stopPropagation();
    event.target.style.color = 'green';
    event.target.style.backgroundColor = 'white';
}
}
ko.applyBindings(new ViewModel());
</script>

Вы можете поиграть с ним в JS Fiddle, который я сделал.