Knockout.js 剔除JS if else，根据值显示不同的html

我正在努力学习击倒，遇到了一个问题

我试图使用ko-if子句，但我自己似乎无法解决它

到目前为止，我的脚本看起来像

  <script>
    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([]));
    });
</script>

     <button type="submit" class="btn pull-right" data-bind="enable: itemToAdd().length > 0"><i class="icon-plus"></i>Add Question</button>
                        <div id="questions" data-bind="foreach: items">
                            <div class="question-item">
                                <label data-bind="text: $data" class="q-label"></label>
                                <textarea placeholder="Answer" class="q-answer"></textarea>
                                 <!-- ko if: questionType()==="ABC" -->
                                           Display ABC
                                <!-- /ko -->
                                <!-- ko if: questionType()==="DEF" -->
                                           Display DEF
                                <!-- /ko -->
                            </div>
                            <div class="clear"></div>
                        </div>

var SimpleListModel=函数（项）{
this.questionType=ko.可观察（“”）；
this.items=ko.observearray（项目）；
this.itemToAdd=ko.可观察（“”）；
this.addItem=函数（）{
if（this.itemToAdd（）！=“”）{
var qt=$（“#问题类型”）.data（“kendoDropDownList”）；
this.questionType（qt.value（））；
console.log（qt.value（））；
this.items.push（this.itemToAdd（））；//添加项。写入“items”ObservalArray会导致任何关联的UI更新。
this.itemToAdd（“”；//清除文本框，因为它绑定到“itemToAdd”可观察对象
}
}.bind（this）；//确保“this”始终是此视图模型
};
$（文档）.ready（函数（）{
ko.applyBindings（新的SimpleListModel（[]）；
});

我的html看起来像

  <script>
    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([]));
    });
</script>

     <button type="submit" class="btn pull-right" data-bind="enable: itemToAdd().length > 0"><i class="icon-plus"></i>Add Question</button>
                        <div id="questions" data-bind="foreach: items">
                            <div class="question-item">
                                <label data-bind="text: $data" class="q-label"></label>
                                <textarea placeholder="Answer" class="q-answer"></textarea>
                                 <!-- ko if: questionType()==="ABC" -->
                                           Display ABC
                                <!-- /ko -->
                                <!-- ko if: questionType()==="DEF" -->
                                           Display DEF
                                <!-- /ko -->
                            </div>
                            <div class="clear"></div>
                        </div>

添加问题
显示ABC
显示DEF

要使ko if:questionType正确工作，我需要做什么

我已经按照建议更新了questionType的设置，但是出现了一个错误

Uncaught错误：无法解析绑定。
消息：ReferenceError:未定义questionType；
绑定值：if:questionType（）==“Comment”

因为

questionType

是一个可观察的对象，所以需要将其作为一个函数调用，而不需要任何参数来检索其值

因此，您的

if

语句需要如下所示：

<!-- ko if: $parent.questionType() === "ABC" -->
    Display ABC
<!-- /ko -->

显示ABC

因为

问题类型

是一个可观察的类型，所以需要将其作为一个函数调用，而不需要参数来检索其值

因此，您的

if

语句需要如下所示：

<!-- ko if: $parent.questionType() === "ABC" -->
    Display ABC
<!-- /ko -->

显示ABC

您还希望这样设置

this.questionType（qt.value（））。谢谢大家，@RP Niemeyer我尝试了你们的建议，但是我得到了一个未捕获的错误：无法解析绑定。消息：ReferenceError:未定义questionType；绑定值：if:questionType（）=“ABC”看起来您的
questionType
不在每个项目上，而是在根级别。如果
块位于
项的循环内，则为
。因此，您需要将其指定为
$parent.questionType（）
或
$root.questionType（）
谢谢……这就完成了应用正确if语句的技巧，但是如果我尝试向vm添加另一项，它会将$parent.questionType值更新为新选择的值。如何使这些值独立？您可能希望您的项成为对象。可能包含一个类型和一个值。然后，您将不会绑定到
$parent
，而是绑定到每个项上的类型。谢谢大家，@RP Niemeyer我尝试了你们的建议，但是我得到了一个未捕获的错误：无法解析绑定。消息：ReferenceError:未定义questionType；绑定值：if:questionType（）=“ABC”看起来您的
questionType
不在每个项目上，而是在根级别。如果
块位于
项的循环内，则为
。因此，您需要将其指定为
$parent.questionType（）
或
$root.questionType（）
谢谢……这就完成了应用正确if语句的技巧，但是如果我尝试向vm添加另一项，它会将$parent.questionType值更新为新选择的值。如何使这些值独立？您可能希望您的项成为对象。可能包含一个类型和一个值。然后您将不会绑定到
$parent
，而是绑定到每个项上的类型。
this.questionType=qt.value（）不是设置可观察值的有效方法。您需要将新值作为参数传递：
this.questionType（qt.value（））
this.questionType=qt.value（）不是设置可观察值的有效方法。您需要将新值作为参数传递：
this.questionType（qt.value（））