2013-07-06 2 views
0

Я довольно новичок в Knockout, и я пытаюсь использовать плагин jquery, который применяет индивидуальный стиль к определенным элементам. Но так как у меня есть страница, которая получает контент из вызова ajax, и все элементы строятся на лету, нокаут начального вызова функции jquery не имеет представления о том, что на странице есть какие-либо элементы, поэтому для этих элементов не применяется стилизация ,Вызов функции jquery после манипуляции с нокаутом dom

Так что я спрашиваю, как мне вызвать функцию jquery после завершения нокаута, манипулируя элементами (DOM)?

Сейчас я звоню функции JQuery следующим образом: -

$(document).on("load",function(){ 
    $(".element").callPlugin("add-style"); 
}); 

ответ

6

applyBindings синхронно, так что вы могли бы назвать callPlugin после ko.applyBindings(VM) (в следующей строке).

ko.applyBindings(VM); 
$(".element").callPlugin("add-style"); 

Или вы могли бы использовать custom bindings, если вы обновляете свой пользовательский интерфейс несколько раз. Предполагая, что .element является <div> (Это также может быть что-нибудь еще), тег будет выглядеть следующим образом:

<div class="element" data-bind="text: 'This is just some text which KO will bind', 
           updateUI: true"> 
This text will change. Wait for it.. 
</div> 

Обратите внимание на updateUI в data-bind. Это соответствующий JS-код для него:

ko.bindingHandlers.updateUI = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){   
     // This will be called when the binding is first applied to an element 
     // Set up any initial state, event handlers, etc. here 
     $(".element").callPlugin("add-style"); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     // This will be called once when the binding is first applied to an element, 
     // and again whenever the associated observable changes value. 
     // Update the DOM element based on the supplied values here. 
     $(".element").callPlugin("update-style"); // just saying 
    } 
}; 

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

Надеюсь, это поможет!

+0

Отметьте это как правильное, потому что это объясняется хорошим примером. Я использовал пользовательскую привязку, и она сработала. Благодарю. Я пытаюсь найти решение с двух дней. Мне нравится Нокаут до сих пор. – shriek

+1

Стоит отметить, что картина 'ko.applyBindings()' не является синхронной, если вы используете 'ko.options.deferUpdates = true;'. Так, например, если вы попытаетесь сразу получить 'svg.getCTM()', это не будет работать, как было предложено. – kernel

0

Я рекомендую делать это с помощью обычая связывания: Таким образом, ваш «внешний код» может быть более интегрированным с привязкой ваших данных. У вас также будет поддержка для обновления, если это необходимо.

Подробнее о концепции здесь http://knockoutjs.com/documentation/custom-bindings.html

Смежные вопросы