将jQuery事件函数应用于新的Knockout.js数组元素

时间:2015-02-13 03:38:26

标签: javascript jquery html knockout.js ko.observablearray

我有一个带有products列表的Knockout.js视图模型,它由ASP.NET Web API调用填充:

// Define viewmodel
var myViewModel = {
    products = ko.observableArray([]);
};

// Apply knockout bindings
ko.applyBindings(vm);

// Function that obtains product data
function listProducts(viewmodel) {
    var productsQuery = "api/products/get";

    // Send an AJAX request
    $.getJSON(productsQuery).done(viewmodel.products);
}

当我呼叫listProducts时,每个元素都成功添加到ff中。 HTML <ul>

<ul data-bind="foreach: products">
    <li class="item">
        <data-bind="text: productName">
    </li>
</ul>

但是,当添加每个项目时,适用于我的.item元素的jQuery函数:

$(".item").click(function () {
    $(this).toggleClass("selected");
});

不适用于这些新添加的元素。

问题:如何向Knockout.js observableArray添加元素,这些元素也会继承相应的jQuery方法?

1 个答案:

答案 0 :(得分:1)

基本上你需要回到淘汰赛文档并阅读,阅读,阅读!忘记用jquery做这件事,它不是ko方式。 Knockout让你摆脱这种编码风格,只需要 grok 吧。

提示:

使用点击绑定和css绑定

http://knockoutjs.com/documentation/css-binding.html

顺便说一句,你也可以这样做:

 $.getJSON(productsQuery).done(viewmodel.products);