淘汰赛:如何对可观察数组元素之间的相互依赖性进行编程
knockout: How to program interdependence between elements of observable array
我有一个场景,我必须向用户显示问题列表。我在淘汰赛中遇到了可观察数组和 foreach 绑定。我可以轻松地向他们展示问题列表。
但是,我的要求是问题是相互依存的。说例如。如果第一个问题的回答为 "a",则必须显示问题 2,如果问题 2 的回答为 "b",则应显示问题 4,5。我怎样才能用 knockout js 做到这一点?
我正在考虑为每个问题使用计算域并基于它们定义可见条件。但是我想不出一个完整的解决方案。任何建议都会非常有帮助。提前致谢
您的直觉是正确的;最简单的方法是拥有一个用于可见性绑定的计算可观察对象。作为一个简单的例子,这应该有效:
var ANSWER = { // psuedo-enum
A : 'a',
B : 'b',
C : 'c',
NONE : null
};
var questionOne = {
text : 'foo',
answer : ko.observable(ANSWER.NONE),
shouldDisplay : true
};
var questionTwo = {
text : 'bar',
answer : ko.observable(ANSWER.NONE),
shouldDisplay : ko.computed(function(){
return questionOne.answer() === ANSWER.B;
})
};
var questionThree = {
text : 'baz',
answer : ko.observable(ANSWER.NONE),
shouldDisplay : ko.computed(function(){
return questionOne.answer() === ANSWER.B && questionTwo.answer() === ANSWER.C;
})
};
var someViewModel = {
questions : ko.observableArray([questionOne, questionTwo, questionThree]);
};
在这种情况下,元素是硬编码的。这样做不是很容易维护。也许您可以设计一些方法来避免重复并以更紧凑的方式存储每个问题的规范。但是,您如何做到这一点超出了简短的 Stack Overflow 答案的范围!不过,我建议您让问题说明它们的依赖关系,而不是让早期问题管理其他问题的状态 'at a distance',可以这么说。
我希望这是一点线索。
我有一个场景,我必须向用户显示问题列表。我在淘汰赛中遇到了可观察数组和 foreach 绑定。我可以轻松地向他们展示问题列表。
但是,我的要求是问题是相互依存的。说例如。如果第一个问题的回答为 "a",则必须显示问题 2,如果问题 2 的回答为 "b",则应显示问题 4,5。我怎样才能用 knockout js 做到这一点?
我正在考虑为每个问题使用计算域并基于它们定义可见条件。但是我想不出一个完整的解决方案。任何建议都会非常有帮助。提前致谢
您的直觉是正确的;最简单的方法是拥有一个用于可见性绑定的计算可观察对象。作为一个简单的例子,这应该有效:
var ANSWER = { // psuedo-enum
A : 'a',
B : 'b',
C : 'c',
NONE : null
};
var questionOne = {
text : 'foo',
answer : ko.observable(ANSWER.NONE),
shouldDisplay : true
};
var questionTwo = {
text : 'bar',
answer : ko.observable(ANSWER.NONE),
shouldDisplay : ko.computed(function(){
return questionOne.answer() === ANSWER.B;
})
};
var questionThree = {
text : 'baz',
answer : ko.observable(ANSWER.NONE),
shouldDisplay : ko.computed(function(){
return questionOne.answer() === ANSWER.B && questionTwo.answer() === ANSWER.C;
})
};
var someViewModel = {
questions : ko.observableArray([questionOne, questionTwo, questionThree]);
};
在这种情况下,元素是硬编码的。这样做不是很容易维护。也许您可以设计一些方法来避免重复并以更紧凑的方式存储每个问题的规范。但是,您如何做到这一点超出了简短的 Stack Overflow 答案的范围!不过,我建议您让问题说明它们的依赖关系,而不是让早期问题管理其他问题的状态 'at a distance',可以这么说。
我希望这是一点线索。