title: Knockout JS if else to display different html based on value
body: <p>I am trying to learn knockout and have come up against a problem.</p>
  
  <p>I am trying to use the ko if clause but can't seem to work it out myself</p>
  
  <p>My script so far looks like</p>
  
  <pre><code>  &lt;script&gt;
      var SimpleListModel = function (items) {
          this.questionType = ko.observable("");
          this.items = ko.observableArray(items);
          this.itemToAdd = ko.observable("");
          this.addItem = function () {
              if (this.itemToAdd() != "") {
                  var qt = $("#question-type").data("kendoDropDownList");
                  this.questionType(qt.value());
                  console.log(qt.value());
                  this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
                  this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
              }
          }.bind(this);  // Ensure that "this" is always this view model
      };
      $(document).ready(function () {
          ko.applyBindings(new SimpleListModel([]));
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>My html looks like</p>
  
  <pre><code>     &lt;button type="submit" class="btn pull-right" data-bind="enable: itemToAdd().length &gt; 0"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;Add Question&lt;/button&gt;
                          &lt;div id="questions" data-bind="foreach: items"&gt;
                              &lt;div class="question-item"&gt;
                                  &lt;label data-bind="text: $data" class="q-label"&gt;&lt;/label&gt;
                                  &lt;textarea placeholder="Answer" class="q-answer"&gt;&lt;/textarea&gt;
                                   &lt;!-- ko if: questionType()==="ABC" --&gt;
                                             Display ABC
                                  &lt;!-- /ko --&gt;
                                  &lt;!-- ko if: questionType()==="DEF" --&gt;
                                             Display DEF
                                  &lt;!-- /ko --&gt;
                              &lt;/div&gt;
                              &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p>What do I need to do, to get the ko if: questionType to work correctly?</p>
  
  <p>I have updated the setting of the questionType as suggested however I am getting an error <code>Uncaught Error: Unable to parse bindings.
  Message: ReferenceError: questionType is not defined;
  Bindings value: if:questionType()==="Comment"</code></p>