2013-11-21 2 views
1

Я знаю о afterRender в foreach-loop.Событие, когда нокаут обновляет DOM после смены единственной привязки свойств

Что мне нужно - это способ получения уведомления, когда Knockout вносит изменения в DOM в ответ на изменение свойства определенного вида.

Предположим, у меня есть viewmodel с единственным ko-наблюдаемым свойством "text", который привязан к div как текстовое содержимое.

Добавление afterRender на одно свойство-binding does'nt, похоже, работает в этом случае.

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

Мне хотелось бы что-то похожее на afterRender, возможно, послеUpdate ?, срабатывало всякий раз, когда привязка обновляла представление DOM на основе измененного vm-свойства.

Возможно ли это как-то уже? Возможно, с некоторой настройкой кода Knockout?

+0

Вы можете добавить код для нас? –

ответ

1

Я выполнил это с использованием API DOM Mutation Observer. Используйте привязку attr, чтобы привязать наблюдаемое свойство к атрибуту элемента, а затем использовать параметр , чтобы настроить его только для наблюдения за изменениями этого атрибута.

<script> 
    viewModel = { 

    myProperty: ko.observable('...'), 

    } 

    // Set up a call back to be fired after each series of modifications to 
    // "data-my-property" attributes in the subtree 
    var mutationObserver = new MutationObserver(function() { 
    // Do things in response to DOM mutation 
    }); 
    mutationObserver.observe(document.querySelector('#watch', 
    {subtree: true, attributeFilter: ['data-my-property']}); 

</script> 

<body> 

    <!-- Bind data-my-property to the viewModel property to be watched --> 
    <div id="watch" data-bind='text: myProperty, attr: {"data-my-property": myProperty}'> 

</body> 
Смежные вопросы