0

是否可以在 Knockout 中使用 jQuery。

尝试将 Knockout 和 Jquery 用于我的脚本。看到这个小提琴我正在使用 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());

我可以使用 javaScript使其工作，但想知道 jquery 函数是否可以用于淘汰赛以及如何使用？

4

3 回答 3

3

您当然可以将 jQuery 与 Knockout 一起使用。我认为你的小提琴的问题是你试图将一个 DOM 节点附加到一个函数：

imgC.appendTo(this);

this在这种情况下是指DropPin功能。您需要将图像附加到 DOM 节点：

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

这是一个更新的小提琴。

于 2013-07-22T12:14:00.123 回答
0

您的问题出在选择器imgC.appendTo(this);中，这里this指的是 ViewModel 而不是文档的正文，因此您需要将其更改为imgC.appendTo($('body'));

工作演示

于 2013-07-22T12:16:13.327 回答
0

这是您的示例工作：http: //jsfiddle.net/R6zwv/25/

这是错误的方法，您通常希望 Knockout 管理 DOM。所以你需要设置你的模板，然后只处理 observables 中的数据。

他是您模板的基本示例：

<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/

于 2013-07-22T12:17:58.210 回答