gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 12:22:30 24 4
gpt4 key购买 nike

我正在尝试呈现页面的不同部分,并对单个数组中包含的不同项目应用适当的绑定(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/

最佳答案

请在不更改代码的情况下查看更新的 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 中的关键字。

关于javascript - 在 Knockout 中循环不同对象的数组 - 绑定(bind)错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34946933/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com