Question

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

您可以在this jsfiddle中看到代码。

所以我的问题是：如何附加一个事件处理程序来从视图模型中调用showSectionName？也许使用像ko.bindingHandlers.click(...)这样的东西？

$(function () {
    ko.bindingHandlers.bootstrapHyperlink = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            var elt = "<a href='#'>" + viewModel.name + "</a>";
            $(element).append(elt);
        }
    };

    var Section = function (id, name) {
        var self = this;

        self.id = id,
        self.name = name
    };

    self.showSectionName = function (data) {
        alert("You clicked the section " + data.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")
        ])
    }
    ko.applyBindings(new viewModel());
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div style="width:200px">
    <ul class="nav nav-pills nav-stacked" data-bind="foreach:Sections">
        <li role="presentation" data-bind="bootstrapHyperlink: {click: showSectionName($data)}">
        </li>
    </ul>
</div>

Answer 1

您的问题不需要像自定义绑定处理程序这样的高级技术。

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

＆＃13;

function Section(id, name) {
    this.id = id;
    this.name = name;
}
Section.prototype.showSectionName = function () {
    alert("You clicked '" + this.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")
    ]);
}

$(function () {
    ko.applyBindings(new ViewModel());
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="width:200px">
    <ul class="nav nav-pills nav-stacked" data-bind="foreach: sections">
        <li role="presentation">
            <a href="#" data-bind="text: name, click: showSectionName"></a>
        </li>
    </ul>
</div>

＆＃13;

请注意，使用prototype仅适用于常规功能，而不适用于淘汰赛的computed值。

Answer 2

ko.utils.registerEventHandler

见here

但看起来这似乎也适用于ko.components。

Answer 3

你可以试试这个，

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

<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);
});

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

3 个答案: