javascript 淘汰js if语句根据布尔数据类型显示值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14737265/
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
knockout js if statement to Display value based on boolean data type
提问by BrianMichaels
I am trying to Display a value based on a table value of True or False. For example if the Value is True then I want it to Say Supported and If it's False then I want it to Say Not Supported! This is my html code
我正在尝试根据 True 或 False 的表值显示值。例如，如果值是 True，那么我希望它说支持，如果它是 False 那么我希望它说不支持！这是我的 html 代码
<p><input type="text" data-bind="value: Support" /></p>
Java script Code
Java脚本代码
$(function() {
dm.viewModel = function() {
var clients = ko.observableArray(),
selectedClient = ko.observable(),
clientChanged = function() {
$.getJSON(dm.WebServices + "/dm/get/clientinfo?client=" + encodeURIComponent(selectedClient()), function(data) {
if (data != null) {
dm.viewModel.Name(selectedClient());
dm.viewModel.Support(data[0]['Support']);
}
})
$('#divClientData').show();
},
LoadClients = function() {
$('#divClientData').hide();
$.getJSON(dm.WebServices + "/dm/get/clientlist", function(data) {
$.each(data, function(key, val) {
clients.push(val);
});
});
},
Name = ko.observable(),
Support = ko.observable(),
return {
Name: Name,
Support: Support
};
}();
ko.applyBindings(dm.viewModel);
dm.viewModel.LoadClients();
})
回答by Konstantin Dinev
In this kind of case you can evaluate the property and render based on the value. Even a function can be provided inside the binding. You can use this:
在这种情况下，您可以评估属性并根据值进行渲染。甚至可以在绑定内部提供一个函数。你可以使用这个：
<input type="text" data-bind="value: Support() ? 'Supported' : 'Not Supported'" />
回答by Jason M. Batchelor
What you're looking for, in this case, is ko.computed().
在这种情况下，您要查找的是 ko.computed()。
EDITED: (Support appears to be in-use as a value from the data set) Add a new value to your ViewModel, something like this:
编辑：（支持似乎正在用作数据集中的值）向您的 ViewModel 添加一个新值，如下所示：
IsSupported = ko.computed(function(){
if(this.Support() == true){
return "Supported";
} else {
return "Not Supported";
}
}, this)
Then, in your markup, you will have to change your data-bind just slightly:
然后，在您的标记中，您将不得不稍微更改您的数据绑定：
<p><input type="text" data-bind="value: IsSupported" /></p>
Alternatively, if you don't want to change your Support field, you'll have to do something like this in your HTML, as suggested by other commenters:
或者，如果您不想更改支持字段，则必须按照其他评论者的建议在 HTML 中执行类似操作：
<p><input type="text" data-bind="value: (Support() ? 'Supported' : 'Not Supported')" /></p>
I'd recommend the former, however, as really, you should keep that logic tucked away inside your ViewModel.
但是，我建议使用前者，实际上，您应该将该逻辑隐藏在您的 ViewModel 中。
(See the KO docs for more info on computed: http://knockoutjs.com/documentation/computedObservables.html)
（有关计算的更多信息，请参阅 KO 文档：http: //knockoutjs.com/documentation/computedObservables.html）
回答by Ben McCormick
You can do that with the if binding
你可以用 if 绑定来做到这一点
See documentation here
请参阅此处的文档
Example from the docs:
文档中的示例：
<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>
<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>
So for you
所以对你
<div data-bind="if: Support">Supported</div>
<div data-bind="ifnot: Support">Not Supported</div>
Edit: The other answers suggesting using the value binding with a ternary condition are probably a better way to accomplish this. I'll keep this up as a reference, but I recommend that solution.
编辑：建议使用具有三元条件的值绑定的其他答案可能是实现此目的的更好方法。我会保留它作为参考，但我推荐该解决方案。
回答by Matansh
In my work I use KO boolean conditions like this:
在我的工作中，我使用这样的 KO 布尔条件：
<div id="bla" data-bind="visible: position != value"></div>
KO is very useful for those types of problems.
KO 对于这些类型的问题非常有用。
