锚标记的数据绑定href属性

时间:2022-11-27 18:10:13

I'm trying to bind anchor attributes to a KnockoutJS ViewModel field. I tried something like this:

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

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

but this doesn't work. Where I can get a list of possible data-bind values for html elements?

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

4 个解决方案

#1


92  

You need to use the attr binding, this allows you to set any attribute you like.

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

For example:

例如:

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

#2


12  

Here you can find a list of all possible bindings.

在这里,您可以找到所有可能绑定的列表。

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

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

on the left side (sidebar) you find links to other bindings like text, attr style and more.

在左侧(侧边栏),您可以找到其他绑定的链接,如文本,attr样式等。

You can do this

你可以这样做

attr: { href: Link}, text: Title like xwrscommented

attr:{href:Link},text:标题,如xwrscommented

or create a template http://knockoutjs.com/documentation/template-binding.html

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

hope this helps

希望这可以帮助

#3


1  

As an alternative to @RichardFriend's answer (and more commonly used option), you could write a custom binding handler to make your views a wee bit more terse:

作为@ RichardFriend的答案(以及更常用的选项)的替代方法,您可以编写一个自定义绑定处理程序,使您的视图更简洁:

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


0  

This works perfect for me

这对我来说很完美

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

#1


92  

You need to use the attr binding, this allows you to set any attribute you like.

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

For example:

例如:

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

#2


12  

Here you can find a list of all possible bindings.

在这里,您可以找到所有可能绑定的列表。

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

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

on the left side (sidebar) you find links to other bindings like text, attr style and more.

在左侧(侧边栏),您可以找到其他绑定的链接,如文本,attr样式等。

You can do this

你可以这样做

attr: { href: Link}, text: Title like xwrscommented

attr:{href:Link},text:标题,如xwrscommented

or create a template http://knockoutjs.com/documentation/template-binding.html

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

hope this helps

希望这可以帮助

#3


1  

As an alternative to @RichardFriend's answer (and more commonly used option), you could write a custom binding handler to make your views a wee bit more terse:

作为@ RichardFriend的答案(以及更常用的选项)的替代方法,您可以编写一个自定义绑定处理程序,使您的视图更简洁:

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


0  

This works perfect for me

这对我来说很完美

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