如何写if/else语句

Question

我必须检查一个变量是否等于某个字符串，例如

if (product_type == "simple") { ... }

如何在 knockout.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 -->

↑ 不起作用，它同时呈现两者。

Answer 1

似乎 knockout.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 -->

Answer 2

另一种选择是使用 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 并移入视图模型

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://whosebug.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://whosebug.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>

如何写if/else语句

How to write if/else statement

if-statement

conditional-statements

knockout.js