锚标记的数据绑定 href 属性

Posted 2023-02-23

【中文标题】锚标记的数据绑定 href 属性

【英文标题】：Data-bind href attribute for anchor tag

【发布时间】：2011-12-28 17:13:52

【问题描述】：

我正在尝试将锚属性绑定到 KnockoutJS ViewModel 字段。我尝试过这样的事情：

<a data-bind="href: Link, value: Title"></a>

但这不起作用。在哪里可以获得 html 元素的可能数据绑定值列表？

【参考方案1】：

你需要使用attr绑定，这允许你设置任何你喜欢的属性。

例如：

<a data-bind="attr:  href: Link, title: Title , text: Title">xxx</a>

【参考方案2】：

您可以在此处找到所有可能绑定的列表。

http://knockoutjs.com/documentation/value-binding.html

在左侧（侧边栏），您可以找到指向其他绑定的链接，例如文本、attr 样式等。

你可以这样做

attr: href: Link, text: Title赞xwrs评论

或创建一个模板 http://knockoutjs.com/documentation/template-binding.html

希望对你有帮助

【讨论】：

谢谢。找到解决方法

【参考方案3】：

作为@RichardFriend's answer（和更常用的选项）的替代方案，您可以编写自定义绑定处理程序以使您的视图更简洁：

ko.bindingHandlers['href'] = 
  update: function(element, valueAccessor) 
    element.href = ko.utils.unwrapObservable(valueAccessor());
  
;

ko.applyBindings(
  myUrl: 'http://***.com',
  myText: 'Stack Overflow website'
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<a data-bind="href: myUrl, text: myText"></a>

【参考方案4】：

这很适合我

            <td class="CommandArea" rowspan="2">
            <p><a href='#' data-bind="click: abandon" >Abandon</a></p>
            </td>

【讨论】：

你能编辑你的答案并解释它是如何回答这个问题的吗？