Knockout JS if else否则根据值显示不同的html

时间:2012-08-04 01:28:03

标签: knockout.js knockout-2.0

我正在努力学习淘汰赛并遇到问题。

我正在尝试使用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>

我的HTML看起来像

     <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>

我需要做什么,以获得ko if:questionType正常工作?

我已根据建议更新了questionType的设置,但收到错误Uncaught Error: Unable to parse bindings. Message: ReferenceError: questionType is not defined; Bindings value: if:questionType()==="Comment"

1 个答案:

答案 0 :(得分:3)

由于questionType是一个可观察的,你需要将它称为一个没有参数的函数来检索它的值。

因此,您的if语句需要如下所示:

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