Javascript KnockoutJS自定义绑定在绑定期间调用click事件，而不是单击_Javascript_Knockout.js

Javascript KnockoutJS自定义绑定在绑定期间调用click事件，而不是单击

javascript knockout.js

Javascript KnockoutJS自定义绑定在绑定期间调用click事件，而不是单击,javascript,knockout.js,Javascript,Knockout.js,我正在尝试使用knockoutjs将一组可观察的人物绑定到一个两列响应的布局中，其中包含点击事件我创建了一个名为TwoCol的自定义绑定，它在数组中循环，并将节点附加到DOM以创建建议的布局，但是当我尝试在嵌套在循环中的自定义绑定中应用它们时，单击事件给我带来了麻烦我已经玩了很多次了，遇到了各种类型的结果，但我现在要做的是在绑定期间调用~click~事件，而不是单击 HTML: JAVASCRIPT: function FriendsModel() { var self =

我正在尝试使用knockoutjs将一组可观察的人物绑定到一个两列响应的布局中，其中包含点击事件

我创建了一个名为TwoCol的自定义绑定，它在数组中循环，并将节点附加到DOM以创建建议的布局，但是当我尝试在嵌套在循环中的自定义绑定中应用它们时，单击事件给我带来了麻烦

我已经玩了很多次了，遇到了各种类型的结果，但我现在要做的是在绑定期间调用~click~事件，而不是单击

HTML:

JAVASCRIPT:

function FriendsModel() {
    var self = this;
    this.Friends = ko.observableArray();
    this.SelectedFriend = "";
    this.SetSelected = function (person) {
        alert(person);
        self.SelectedFriend = person;
    }
}
function isOdd(num) {
    return num % 2;
}
ko.bindingHandlers.TwoCol = {
    update: function (elem, valueAccessor) {
        var i = 0;
        var rowDiv;
        var vFriends = ko.utils.unwrapObservable(valueAccessor());
        $(elem).html('');
        while (i < vFriends.length) {
            //create row container every other iteration
            if (!isOdd(i)) {
                rowDiv = document.createElement("div");
                $(rowDiv).addClass("row-fluid");
                elem.appendChild(rowDiv);
            }
            //add column for every iteration
            var colDiv = document.createElement("div");
            $(colDiv).addClass("span6");
            rowDiv.appendChild(colDiv);
            //actual code has fairly complex button html here
            var htmlDiv = document.createElement("div");
            var htmlButton = vFriends[i]
            htmlDiv.innerHTML = htmlButton;
            colDiv.appendChild(htmlDiv);
            //i think i need to add the event to the template too?
            //$(htmlDiv).attr("data-bind", "click: { alert: $data }")
            //it seems that the SetSelected Method is called while looping
            ko.applyBindingsToDescendants(htmlDiv, { click: friends.SetSelected(vFriends[i]) });
            i++;
        }
        return { controlsDescendantBindings: true };
    }
}

var friends = new FriendsModel();
friends.Friends.push('bob');
friends.Friends.push('rob');
friends.Friends.push('mob');
friends.Friends.push('lob');
ko.applyBindings(friends);

函数FriendsModel（）{
var self=这个；
this.Friends=ko.array（）；
this.SelectedFriend=“”；
this.SetSelected=功能（个人）{
警惕（人）；
self.SelectedFriend=个人；
}
}
函数isOdd（num）{
返回数值%2；
}
ko.bindingHandlers.TwoCol={
更新：函数（元素、值访问器）{
var i=0；
var-rowDiv；
var vFriends=ko.utils.unwrapobbservable（valueAccessor（））；
$（elem.html（“”）；
while（i

我认为您没有正确使用

ko.applybindingstosubstands

。我承认我对代码中某些值的含义有点困惑，所以我可能对某些内容的解释不正确

这是一把小提琴，我认为它正按照你的意图工作：

请注意，如果手动控制子体绑定（

返回{ControlsDescentBindings:true}；

），则需要在init回调中进行设置，而不是更新。更新回调已经太晚了

更改的快速摘要（已编辑）：

将

controlsDescentBindings

移动到

init

绑定回调中

将必要的参数名称添加到绑定参数列表以访问其他值

我重新启用了html.attr调用。请注意，由于绑定上下文设置为实际项，因此SetSelected方法在该级别不再存在，因此有必要使用

$parent.SetSelected

        $(htmlDiv).attr("data-bind", "click: $parent.SetSelected")

修复了

ko.applybindingstosubstands

调用。此方法获取从当前绑定上下文创建的绑定上下文，并获取应用绑定的元素。您不想重新应用绑定，这就是为什么整个绑定都需要在init处理程序中的原因

        var childBindingContext = bindingContext.createChildContext(vFriends[i]);
    ko.applyBindingsToDescendants(childBindingContext, colDiv);