数据绑定返回带有数据绑定的 html a href答案

【问题标题】：Data-bind return html a href with data-bind数据绑定返回带有数据绑定的 html a href
【发布时间】：2021-06-27 09:26:31
【问题描述】：

我在将数据绑定到返回 observable 时遇到问题，

我的html代码：

    <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>

我的 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");
        }

我无法触发测试功能

请问解决方案是什么？谢谢！

【问题讨论】：

标签： javascript html knockout.js triggers observable

【解决方案1】：

html 绑定不applyBindings 到它注入的内容。在这个特定的示例中，我认为您最好使用 text 绑定。您可以将 <a> 标记放在您的 HTML 中，而不是您的视图模型中。

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>

如果您想将 <a> 标记与主 HTML 分开，最好使用 template binding 或 knockout component。

【讨论】：