【问题标题】:knockout: How to program interdependence between elements of observable array淘汰赛:如何编程可观察数组元素之间的相互依赖关系
【发布时间】:2015-01-05 07:18:43
【问题描述】:
我有一个场景,我必须向用户显示问题列表。我在淘汰赛中遇到了可观察数组和 foreach 绑定。我可以轻松地向他们显示问题列表。
但是,我的要求是问题是相互依赖的。比如说。如果第一个问题的回答为“a”,则必须显示问题 2,如果问题 2 的回答为“b”,则应显示问题 4,5。如何使用淘汰赛 js 做到这一点?
我正在考虑为每个问题使用计算域并根据它们定义可见条件。但我想不出一个完整的解决方案。任何建议都会非常有帮助。提前致谢
【问题讨论】:
标签:
javascript
knockout.js
【解决方案1】:
你的直觉是正确的;最简单的方法是在可见性绑定中使用计算出的 observable。作为一个简单的例子,这应该可以工作:
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 答案的范围!不过,我建议您让问题说明它们的依赖关系,而不是让早期问题“远距离”管理其他问题的状态,可以这么说。
我希望这是一个线索。