数据绑定返回 html 带数据绑定的 href

Question

i have a problem with data-bind into a return observable,

My html code:

    <form data-bind="submit: capitalizeNames">

    <p><label>Prénom : <input data-bind="value: firstName" /></label></p>

    <p><label>Nom: <input data-bind="value: lastName" /></label></p>

    <p>Nom complet: <strong data-bind="html: fullName" ></strong></p>

    <button type="submit">Valider</button>

</form>

My js knwockout:

            self.fullName = ko.computed(function() {
            var firstName = self.firstName();
            return '<a data-bind="click: $root.test" href="#">' + firstName + '</a>';

        });

        self.test = function() {
            console.log("test");
        }

I can't trigger test function

What is solution plz? Thank you !

Answer 1

The html binding does not applyBindings to the content it injects. In this particular example I think you're best of using the text binding. You can put the <a> markup in your HTML instead of your viewmodel.

 function ViewModel() { var self = this; self.firstName = ko.observable("Jane"); self.lastName = ko.observable("Doe"); self.fullName = ko.computed(function() { var firstName = self.firstName(); return firstName; }); self.test = function() { console.log("test"); } } ko.applyBindings(new ViewModel());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <p><label>Prénom: <input data-bind="value: firstName" /></label></p> <p><label>Nom: <input data-bind="value: lastName" /></label></p> <p>Nom complet: <strong><a data-bind="text: fullName, click: test" href="#"></a></strong></p>

If you want to separate your <a> markup from the main HTML, it's best to use the template binding or a knockout component .