javascript - 在 Knockout 中循环不同对象的数组 - 绑定(bind)错误

Question

我正在尝试呈现页面的不同部分，并对单个数组中包含的不同项目应用适当的绑定(bind)。数组中的每个项目都可以具有不同的结构/属性。

例如，我们可以有 3 种不同的问题类型，与该问题相关的数据可以采用不同的格式。

JSON 数据

var QuestionTypes = { Textbox: 0, Checkbox: 1, Something: 2 }

var QuestionData = [
    {
        Title: "Textbox",
        Type: QuestionTypes.Textbox,
        Value: "A"

    },
    {
        Title: "Checkbox",
        Type: QuestionTypes.Checkbox,
        Checked: "true"
    },
    {
        Title: "Custom",
        Type: QuestionTypes.Something,
        Something: { SubTitle : "Something...", Description : "...." }
    }
];

JavaScript

$(document).ready(function(){
    ko.applyBindings(new Model(QuestionData), $("#container")[0]);
})

function QuestionModel(data){
    var self = this;

  self.title = ko.observable(data.Title);  
  self.type = ko.observable(data.Type);

  self.isTextbox = ko.computed(function(){
    return self.type() === QuestionTypes.Textbox;
  });

  self.isCheckbox = ko.computed(function(){
    return self.type() === QuestionTypes.Checkbox;
  });

  self.isSomething = ko.computed(function(){
    return self.type() === QuestionTypes.Something;
  });
}

function Model(data){
    var self = this;

  self.questionData = ko.observableArray(ko.utils.arrayMap(data, function(question){
    return new QuestionModel(question); 
  }));  
}

HTML

<div id="container">  
  <div data-bind="foreach: questionData">
    <h1 data-bind="text: title"></h1>

    <!-- ko:if isTextbox() -->
    <div data-bind="text: Value"></div>
    <!-- /ko -->

    <!-- ko:if isCheckbox() -->
    <div data-bind="text: Checked"></div>
    <!-- /ko -->

    <!-- ko:if isSomething() -->
    <div data-bind="text: Something">
      <h1 data-text: SubTitle></h1>
      <div data-text: Description></div>
    </div>
    <!-- /ko -->

  </div>
</div>

无论条件为真/假，都会应用 if 条件中的绑定(bind)。这会导致 JavaScript 错误...因为并非集合中的所有对象都具有“Value”属性等。

Uncaught ReferenceError: Unable to process binding "foreach: function (){return questionData }"
Message: Unable to process binding "text: function (){return Value }"
Message: Value is not defined

有什么方法可以防止绑定(bind)应用于错误的对象吗？

概念 JSFiddle:https://jsfiddle.net/n2fucrwh/

Answer 1

请在不更改代码的情况下查看更新的 Fiddler。仅在循环中添加 $data

https://jsfiddle.net/n2fucrwh/3/

 <!-- ko:if isTextbox() -->
<div data-bind="text: $data.Value"></div>
<!-- /ko -->

<!-- ko:if isCheckbox() -->
<div data-bind="text: $data.Checked"></div>
<!-- /ko -->

<!-- ko:if isSomething() -->
<div data-bind="text: $data.Something"></div>
<!-- /ko -->

在循环内部，您需要提供$data.Value。看来Value是与绑定(bind)冲突的 knockout 中的关键字。