我必须检查变量是否等于某个字符串,例如
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 -->
↑不起作用,它同时渲染两者。
答案 0 :(得分:1)
另一种选择是使用 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>
答案 1 :(得分:-1)
好像敲门.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 -->