Javascript 锚标记的数据绑定 href 属性
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8123142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Data-bind href attribute for anchor tag
提问by xwrs
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 元素可能的数据绑定值列表?
回答by Richard Friend
回答by dknaack
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.
在左侧(侧边栏),您可以找到指向其他绑定(如文本、属性样式等)的链接。
You can do this
你可以这样做
attr: { href: Link}, text: Title
like xwrs
commented
attr: { href: Link}, text: Title
喜欢xwrs
评论
or create a template http://knockoutjs.com/documentation/template-binding.html
或者创建一个模板 http://knockoutjs.com/documentation/template-binding.html
hope this helps
希望这可以帮助
回答by Jeroen
As an alternativeto @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://stackoverflow.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>
回答by MarlinG
This works perfect for me
这对我来说很完美
<td class="CommandArea" rowspan="2">
<p><a href='#' data-bind="click: abandon" >Abandon</a></p>
</td>