如何解决如何编写if / else语句
我必须检查变量是否等于某个字符串,例如
if (product_type == "simple") { ... }
我如何在敲门js中做到这一点?我已经读过documentation,但不确定在哪里看。
尝试:
<!-- ko if: is_product_type && product_type == "simple" -->
<div class="primary">
<a data-bind="attr: {href: configure_url,title: $t('foo')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- ko else: -->
<div class="primary">
<a data-bind="attr: {href: configure_url,title: $t('bar')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
↑不起作用,它同时渲染两者。
解决方法
另一种选择是使用 ifnot 绑定。对于更复杂的场景,我通常会将这些类型的决策移至视图模型中
<!-- ko if: product_type == "simple" -->
<div class="primary">
<a data-bind="attr: {href: configure_url,title: $t('foo')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
<!-- ko ifnot: product_type == "simple" -->
<div class="primary">
<a data-bind="attr: {href: configure_url,title: $t('bar')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
编辑
这是一个简单的演示,演示如何将一些决策移出html并移入viewmodel
function ViewModel(){
var self = this;
self.option1 = ko.observable(false);
self.option2 = ko.observable(true);
self.option3 = ko.observable(true);
self.option4 = ko.observable(true);
self.showEditLink = ko.computed(function(){
return self.option1() && self.option2() && self.option3() && self.option4();
});
self.configure_url = ko.observable('https://stackoverflow.com');
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label><input type="checkbox" data-bind="checked: option1" /> Option 1</label>
<label><input type="checkbox" data-bind="checked: option2" /> Option 2</label>
<label><input type="checkbox" data-bind="checked: option3" /> Option 3</label>
<label><input type="checkbox" data-bind="checked: option4" /> Option 4</label>
<!-- ko if: showEditLink -->
<br/>
<div class="primary">
<a data-bind="text: configure_url,attr: {href: configure_url}" class="action edit">
</a>
</div>
<!-- /ko -->
function ViewModel(){
var self = this;
self.option1 = ko.observable(false);
self.option2 = ko.observable(true);
self.option3 = ko.observable(true);
self.option4 = ko.observable(true);
self.showEditLink = ko.computed(function(){
return self.option1() && self.option2() && self.option3() && self.option4();
});
self.configure_url = ko.observable('https://stackoverflow.com');
self.product_type = ko.observable('foo');
self.getTitle = ko.pureComputed(function(){
switch (self.product_type()){
case 'foo': return 'Product type: Foo';
case 'bar': return 'Product type: Bar';
default: return 'Unknown Product type';
}
});
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label>Product Type: <input data-bind="textInput: product_type" /></label>
<br/>
<br/>
<label><input type="checkbox" data-bind="checked: option1" /> Option 1</label>
<label><input type="checkbox" data-bind="checked: option2" /> Option 2</label>
<label><input type="checkbox" data-bind="checked: option3" /> Option 3</label>
<label><input type="checkbox" data-bind="checked: option4" /> Option 4</label>
<div class="primary" data-bind="if: showEditLink">
<a data-bind="text: getTitle,attr: {href: configure_url,title: getTitle }" class="action edit">
</a>
</div>
,
好像敲门.js甚至不支持else
,因此您必须创建一个肮脏的解决方法:
<!-- ko if: product_type == "simple" -->
<div class="primary">
<a data-bind="attr: {href: configure_url,title: $t('foo')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
<!-- ko if: product_type != "simple" -->
<div class="primary">
<a data-bind="attr: {href: configure_url,title: $t('bar')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。