Javascript 使用Knockout.JS如何使用自定义绑定处理程序附加事件处理程序

我的绑定处理程序向列表项标记添加超链接。我想知道如何通过绑定处理程序将单击事件附加到超链接。单击事件应该调用视图模型中的函数

您可以在中看到代码

所以我的问题是：如何附加一个事件处理程序来从视图模型调用showSectionName？可能使用类似于

ko.bindingHandlers.click（…）

$（函数（）{
ko.bindingHandlers.bootstrapHyperlink={
init：函数（元素、valueAccessor、allBindings、viewModel、bindingContext）{
var elt=“”；
$（元素）。追加（elt）；
}
};
var节=函数（id、名称）{
var self=这个；
self.id=id，
self.name=名称
};
self.showSectionName=函数（数据）{
警报（“您单击了“+data.name”部分）；
}
函数viewModel（）{
var self=这个；
自截面积=ko.array([
新订的第（1）条（“第1条”），
新订的第（2）条（“第2条”），
新订的第（3）条（“第3条”）
])
}
应用绑定（新的viewModel（））；
});





请参见
ko.utils.registerEventHandler

但它看起来也可能是一个很好的用途。
请参见for
ko.utils.registerEventHandler

但看起来这可能是一个很好的用途。
你可以试试这个

我希望这更像你所追求的：





$（函数（）{
ko.bindingHandlers.bootstrapHyperlink={
init：函数（元素、值访问器）{
var value=ko.unwrap（valueAccessor（））；
var elt=“”；
$（元素）。追加（elt）；
$（元素）。在（'click'，函数（）{
警报（$（this.text（））；
});
}
}
节=函数（id、名称）{
var self=这个；
self.id=id，
self.name=名称
};
函数viewModel（）{
var self=这个；
自截面积=ko.array(
[
新订的第（1）条（“第1条”），
新订的第（2）条（“第2条”），
新订的第（3）条（“第3条”））；
self.showSectionName=函数（数据）{
警报（“您单击了“+data.name”部分）；
}
}
var vm=new viewModel（）；
ko.应用绑定（vm）；
});
您可以试试这个

我希望这更像你所追求的：





$（函数（）{
ko.bindingHandlers.bootstrapHyperlink={
init：函数（元素、值访问器）{
var value=ko.unwrap（valueAccessor（））；
var elt=“”；
$（元素）。追加（elt）；
$（元素）。在（'click'，函数（）{
警报（$（this.text（））；
});
}
}
节=函数（id、名称）{
var self=这个；
self.id=id，
self.name=名称
};
函数viewModel（）{
var self=这个；
自截面积=ko.array(
[
新订的第（1）条（“第1条”），
新订的第（2）条（“第2条”），
新订的第（3）条（“第3条”））；
self.showSectionName=函数（数据）{
警报（“您单击了“+data.name”部分）；
}
}
var vm=new viewModel（）；
ko.应用绑定（vm）；
});
对于您的问题，不需要像定制绑定处理程序这样的高级技术

当您使用knockout时，不应该使用jQuery构建HTML。Knockout为您构建所有HTML。考虑这个简单的例子：


功能部分（id、名称）{
this.id=id；
this.name=名称；
}
Section.prototype.showSectionName=函数（）{
警报（“您单击了“'+this.name+””）；
}
函数ViewModel（）{
var self=这个；
self.sections=ko.array([
新订的第（1）条（“第1条”），
新订的第（2）条（“第2条”），
新订的第（3）条（“第3条”）
]);
}
$（函数（）{
应用绑定（新的ViewModel（））；
});





对于您的问题，不需要像定制绑定处理程序这样的高级技术

当您使用knockout时，不应该使用jQuery构建HTML。Knockout为您构建所有HTML。考虑这个简单的例子：


功能部分（id、名称）{
this.id=id；
this.name=名称；
}
Section.prototype.showSectionName=函数（）{
警报（“您单击了“'+this.name+””）；
}
函数ViewModel（）{
var self=这个；
self.sections=ko.array([
新订的第（1）条（“第1条”），
新订的第（2）条（“第2条”），
新订的第（3）条（“第3条”）
]);
}
$（函数（）{
应用绑定（新的ViewModel（））；
});





没错，它不在ViewModel中，但在脚本块中：ShowSectionName没错，它不在ViewModel中，但在脚本块中：ShowSectionName谢谢-我现在正在查看您的链接。我检查了RPN链接并添加了：
ko.bindingHandlers.click.init（元素，valueAccessor）到处理程序，但它在加载时执行所有链接。在那之后
<div style="width:200px">
    <ul class="nav nav-pills nav-stacked" data-bind="foreach:Sections">
        <li role="presentation" data-bind="bootstrapHyperlink: name"></li>
    </ul>
</div>

$(function () {
    ko.bindingHandlers.bootstrapHyperlink = {
        init: function (element, valueAccessor) {
            var value = ko.unwrap(valueAccessor());
            var elt = "<a href='#'>" + value + "<span class='badge'></span></a>";
            $(element).append(elt);

            $(element).on('click', function () {
                alert($(this).text());
            });
        }
    }

    Section = function (id, name) {

        var self = this;

        self.id = id,
        self.name = name
    };

    function viewModel() {
        var self = this;
        self.Sections = ko.observableArray(
        [
        new Section(1, "Section 1"),
        new Section(2, "Section 2"),
        new Section(3, "Section 3")]);

        self.showSectionName = function (data) {
            alert("You clicked the section " + data.name);
        }
    }
    var vm = new viewModel();
    ko.applyBindings(vm);
});