Question

我已经搜索过并尝试过不同的选择器，但我无法解决这个问题。我正在按照教程，但我没有得到结果。

SELECT u.id, u.name, uephone.value AS phone, ueemail.value AS email, uenick.value AS nickname FROM user u LEFT JOIN user_extra uephone ON uephone.user_id = u.id AND uephone.user_extra_name = 'phone' LEFT JOIN user_extra ueemail ON ueemail.user_id = u.id AND ueemail.user_extra_name = 'email' LEFT JOIN user_extra uenick ON uenick.user_id = u.id AND uenick.user_extra_name = 'nickname'事件似乎没有绑定到动态生成的click部分div？没有与之关联的'.person-brief'事件。我也试过了click，但这似乎已被弃用了。

知道我做错了吗？

person.js模型

.live()

person.html视图

var gotoDetails = function (selectedPerson) {
    if (selectedPerson && selectedPerson.id()) {
        var url = '#/persondetail/' + selectedPerson.id();
        router.navigateTo(url);
    }
};

var viewAttached = function (view) {
    bindEventToList(view, '.person-brief', gotoDetails); 
};

var bindEventToList = function (rootSelector, selector, callback, eventName) {
    var eName = eventName || 'click'; 
    $(rootSelector).on(eName, selector, function () { 
        var ser = ko.dataFor(this); 
        callback(ser);
        return false;
    });
};

var vm = {
    people: people,
    title: 'people demo',
    viewAttached: viewAttached
};
return vm;

Answer 1

使用KnockoutJS，您应该使用the click binding（或者the event binding），而不是使用jQuery来手动操作DOM。

这样的事情就变成了你的代码：

var vm = {
    people: people,
    title: 'people demo',
    viewAttached: viewAttached
};

vm.myHandler = function (person) { 
  goToDetails(person);
  return false;
};

由于myHandler非常简单，您可以内联goToDetails代码，该代码可以从其关闭中访问vm。

你在视图中绑定如下：

<div class="person-brief" data-bind="click: $root.myHandler">
...
</div>

一般提示：在 jQuery，或 KnockoutJS上做一个教程。如果采用后者，尽量少用jQuery（通常很可能），最明显的是不要使用jQuery来操作DOM（自定义绑定处理程序和后渲染函数除外）。

将敲击单击事件绑定到选择器

1 个答案: