Mon gestionnaire de liaison ajoute un lien hypertexte à une balise d'élément de liste. Je voudrais savoir comment attacher un événement de clic à l'hyperlien via le gestionnaire de liaison. L'événement click doit appeler une fonction dans le modèle de vue.

Vous pouvez voir le code dans ce jsfiddle.

Ma question est donc la suivante: comment attacher un gestionnaire d'événements pour appeler showSectionName à partir du modèle de vue? Peut-être en utilisant quelque chose comme 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>
1
user1309226 22 juil. 2015 à 15:15

3 réponses

Meilleure réponse

Voir ici pour {{X0} }

Mais il semble également que cela pourrait être une bonne utilisation pour ko.components.

1
Roy J 22 juil. 2015 à 12:28

Vous pouvez essayer ça,

J'espère que cela ressemble plus à ce que vous recherchiez: 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);
});
1
shammelburg 22 juil. 2015 à 13:49

Il n'y a pas besoin de techniques avancées comme des gestionnaires de liaison personnalisés pour votre problème.

Vous ne devez pas créer de code HTML avec jQuery lorsque vous utilisez knockout. Knockout crée tout votre code HTML pour vous. Considérez cet exemple simple:

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

Notez que l'utilisation de prototype ne fonctionne que pour les fonctions normales, pas pour les valeurs computed de knockout.

2
Tomalak 22 juil. 2015 à 13:03