javascript 在knockout.js 中禁用锚标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15969045/
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
Disable anchor tag in knockout.js
提问by akeeseth
I need to disable the anchor tag inside a foreach loop of knockout.js in HTML.
我需要在 HTML 中的 Knockout.js 的 foreach 循环中禁用锚标记。
Here is my code:
这是我的代码：
<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick,disable: ($data.SkypeId == 'null')">Skype </a>
回答by Sujesh Arukil
Anchor tags cannot be disabled.
The easiest is to use ko if bindingand then render a spaninstead of the anchorif the skype id is null
无法禁用锚标记。
最简单的是使用ko if binding然后渲染一个span而不是anchor如果Skype id为空
<!-- ko if: skypeId === null -->
<span >No Skype Id</span>
<!-- /ko -->
<!-- ko if: skypeId !== null -->
<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick,text: skypeId"></a>
<!-- /ko -->
回答by Oskar Skuteli
If there is no hrefattribute on aelement but only an action in a click binding, then an easy way would be passing expression condition && handlerto a click binding.
如果元素href上没有属性a而 a 中只有一个动作click binding，那么一种简单的方法是将表达式传递condition && handler给点击绑定。
If condition is observable you'll need to add parentheses.
如果条件是可观察的，则需要添加括号。
<a data-bind="click: flag1() && handler">Enabled link</a>
<a data-bind="click: flag2() && handler">Disabled link</a>
It will be evaluated as falseif condition is false(so nothing will happen),
and will be evaluated as a handler if condition is true.
它将被评估为falseif 条件是false（所以什么都不会发生），如果条件是，
它将被评估为处理程序true。
回答by Philip Stratford
First off, there's a school of thought with which I have some sympathy that says just don't do it. A hyperlink that does nothing is just text.
首先，有一种思想流派让我有些同情，那就是不要这样做。什么都不做的超链接只是文本。
However, I can see the flip side of the coin - I came across this same problem because I am using a Bootstrap dropdown menu which contains anchor tags as menu options, and to my mind it gives a better user experience to show the menu options as disabled rather than just not show them at all, and I feel it's cleaner to 'disable' the hyperlink than to include markup for a hyperlink and a spanwith the same text and then conditionally show one or the other. So, my solution was:
但是，我可以看到硬币的另一面 - 我遇到了同样的问题，因为我使用的是包含锚标签作为菜单选项的 Bootstrap 下拉菜单，在我看来，它提供了更好的用户体验来显示菜单选项禁用而不是根本不显示它们，我觉得“禁用”超链接比包含超链接的标记和span具有相同文本的标记更清晰，然后有条件地显示一个或另一个。所以，我的解决方案是：
<a data-bind="click: checkCondition() ? myFunction : null, css: { disabled: !checkCondition() }"></a>
Note that checkCondition()is a function which returns true or false, indcating whether the hyperlink should be enabled or not. The cssbinding is just styling the hyperlink to appear disabled - you may have to add your own .disabledCSS class if you're not using Bootstrap.
请注意，这checkCondition()是一个返回 true 或 false 的函数，指示是否应启用超链接。该css结合只是造型出现残疾的超级链接-您可能需要添加自己的.disabled，如果你不使用引导CSS类。
The key to this working is that the anchor has no hrefattribute, so it's useless as a hyperlink without the Knockout clickbinding, which means that you could just as easily use this method with any element type (e.g. this could be a clickable spanas easily as an anchor). However, I wanted to use an anchor so that my styling continued to be applied without any extra work.
这个工作的关键是锚点没有href属性，所以它作为没有 Knockoutclick绑定的超链接是没有用的，这意味着你可以很容易地将此方法与任何元素类型一起使用（例如，这可以span像锚）。然而，我想使用一个锚点，这样我的造型就可以继续应用而无需任何额外的工作。
回答by Paul Manzotti
Disable only works with form elements, not anchor tags. You could use the visiblebinding instead, and just hide the link if there is no user id. If you do want to show something even if there isn't a user id, then add a span with the opposite visible test, then one will be shown if there is a user id, and the other if there isn't:
禁用仅适用于表单元素，不适用于锚标记。您可以改用可见绑定，如果没有用户 ID，只需隐藏链接。如果您确实想显示某些内容，即使没有用户 ID，则添加一个具有相反可见测试的跨度，如果有用户 ID，则会显示一个，如果没有，则会显示另一个：
<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick, visible: ($data.SkypeId !== 'null')">Skype </a>
<span class="notLink" data-bind="visible: ($data.SkypeId === 'null')">Skype </span>
As a side note, if SkypeId is an observable, you will need to call it as one in your comparison check:
附带说明一下，如果 SkypeId 是一个 observable，则您需要在比较检查中将其称为一个：
($data.SkypeId() !== 'null')
回答by Anders
With some override magic you can get this behaviour without that your view or ViewModel code need changes
通过一些覆盖魔法，您可以在不需要更改视图或 ViewModel 代码的情况下获得此行为
(function () {
var orgClickInit = ko.bindingHandlers.click.init;
ko.bindingHandlers.click.init = function (element, valueAccessor, allBindingsAccessor, viewModel) {
if (element.tagName === "A" && allBindingsAccessor().enable != null) {
var disabled = ko.computed(function () {
return ko.utils.unwrapObservable(allBindingsAccessor().enable) === false;
});
ko.applyBindingsToNode(element, { css: { disabled: disabled} });
var handler = valueAccessor();
valueAccessor = function () {
return function () {
if (ko.utils.unwrapObservable(allBindingsAccessor().enable)) {
handler.apply(this, arguments);
}
}
};
}
orgClickInit(element, valueAccessor, allBindingsAccessor, viewModel);
};
})();
When you include that code the enable binding will work for anhors
当您包含该代码时，启用绑定将适用于 anhors
Fiddle, it uses my convention library so ignore that part http://jsfiddle.net/xCfQC/4/
小提琴，它使用我的约定库所以忽略那部分 http://jsfiddle.net/xCfQC/4/
回答by nav0611
Knockout enable/disable binding do not support anchor tags.
淘汰赛启用/禁用绑定不支持锚标记。
So you have 2 solution to this.
所以你有2个解决方案。
Solution 1
方案一
<a href='#' title="Skype" data-bind='click: function() {
if(($data.SkypeId !== 'null'))
{
//call the desired method from here
}' >
Solution 2
解决方案2
This button displays only when your condition is success and it has click binding
此按钮仅在您的条件成功且具有点击绑定时显示
<a data-bind="click: $parent.StoreUserClick, visible: ($data.SkypeId != 'null')" href="#" title="Skype">
This button displays only when your negative condition is success and it do not have click binding
此按钮仅在您的否定条件为成功且没有点击绑定时显示
<a data-bind="visible: ($data.SkypeId == 'null')" href="#" title="Skype ">
回答by marianc
I found ko.plusan excellent library which implements command pattern. The 'action' can not be executed until 'canExecute' condition is true.
我发现ko.plus是一个实现命令模式的优秀库。在 'canExecute' 条件为真之前，不能执行 'action'。
var vm = {
enabled: ko.observable(false),
StoreUserClick: ko.command({
action: function () {
window.alert('Command is active')
},
canExecute: function () {
return vm.enabled();
}
})
}
ko.applyBindings(vm);a.disabled {
color: gray;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://raw.githubusercontent.com/stevegreatrex/ko.plus/master/dist/ko.plus.js"></script>
<a href="" id="aQStreamSkype" data-bind="click: StoreUserClick, css: { disabled: !StoreUserClick.canExecute() }">Skype</a>
<br />
<br />
<input type="checkbox" data-bind="checked: enabled">enabled回答by Jason Marsell
Another option that I like to use is to disable the anchor using the "css"directive:
我喜欢使用的另一个选项是使用“css”指令禁用锚点：
<a id="aQStreamSkype" data-bind="css: { disabled: $data.SkypeId == 'null' }">Skype</a>
