Question

是否可以在Knockout中使用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。因此，您需要设置模板，然后只处理可观察数据中的数据。

他是模板的基本示例：

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

以下是使用observables的示例：http://jsfiddle.net/R6zwv/29/

KnockoutJS中的jQuery

3 个答案: