jQuery in KnockoutJS

Question

Можно ли использовать jQuery в Knockout.

пытается использовать нокаут и JQuery для моего скрипта. see this fiddle Я использую Chrome.

var viewModel = function() { 
    var self = this; 
    self.DropPin = function (ev) { 
     var x = ev.pageX - window.event.clientX; 
     var y = ev.pageY - window.event.clientX; 

     $('.pin').remove(); 
     x = (x - 10); //icon size 
     y = (y - 30); 
     var imgC = $('<img class="pin">'); 
     imgC.css('top', y); 
     imgC.css('left', x); 
     imgC.attr('src', "http://placekitten.com/200/300"); 
     imgC.appendTo(this); 


    } 
} 
ko.applyBindings(new viewModel()); 

я могу заставить его работать using javaScript, но хочу знать, если функции JQuery могут быть использованы в нокауте и как?

Answer 1

Вы, безусловно, можете использовать jQuery вместе с Knockout. Я думаю, что проблема с вашей скрипкой является то, что вы пытаетесь добавить узел DOM к функции:

imgC.appendTo(this); 

this в данном случае относится к функции DropPin. Вы должны добавить изображение в узел DOM:

imgC.appendTo($("body"));

Here является обновленной скрипку.

Answer 2

ваша проблема в селекторе imgC.appendTo(this);, здесь this относятся к ViewModel не тело документа, так что вы должны изменить его на imgC.appendTo($('body'));

Working Demo

Answer 3

Вот ваш пример работает: http://jsfiddle.net/R6zwv/25/

Это неправильный подход, хотя, как правило, вы хотите, чтобы Knockout управлял DOM. Таким образом, вы создали свои шаблоны, а затем просто обрабатываете данные в наблюдаемых.

He're простой пример шаблона:

<img data-bind="attr: { src: kittenSrc }, css: { top: kittenTop, left: kittenLeft }" /> 
<div id="map" data-bind="click: DropPin">add a image here</div> 

Вот ваш пример использования наблюдаемыми: http://jsfiddle.net/R6zwv/29/