同步相互依赖的Dojo小部件/值

Question

我将要构建一个简单的“抵押计算器”，用户可以在其中调整一些滑块或编辑输入字段中的值，以便根据所提供的数据计算一些最终值。

从示意图上看，它将如下所示：

Slider1 - Input1
Slider2a - Input2a
Slider2b - Input2b

这个想法是输入的值必须反映在滑块上，反之亦然。 另外，根据一些简单的规则，滑块2a / 2b和输入2a / 2b的值和限制彼此依赖。

它必须在Dojo中完成，这是我以前从未使用过的，尽管Dojo有相当不错的文档，但它有点让人不知所措，因此，如果有人能指出正确的方向，我将不胜感激。

Answer 1

首先，这是我在jsFiddle工作的解决方案： http : //jsfiddle.net/phusick/HCx3w/

您可以使用dojo/aspect ， dojo/topic和dojo/Stateful并以各种方式将这些小部件彼此直接连接。 您可能最终会得到一组紧密耦合的小部件，即，即使没有理由特定的小部件不应该知道其值正在与另一个小部件同步的事实，这些小部件也会彼此了解。

与前述相反，您可以应用loose coupling原理，这将使您可以同步任意数量的小部件，而无需它们之间的任何相互引用。 这是我的解决方案：

1. 获取对小部件的引用并将它们耦合到集合（ arrays ）中：

    var slider1 = registry.byId("slider1"); var slider2 = registry.byId("slider2"); var spinner1 = registry.byId("spinner1"); var spinner2 = registry.byId("spinner2"); var set1 = [slider1, spinner1]; var set2 = [slider2, spinner2]; 

2. synchronize功能：

    var synchronize = function(/*Array*/ widgets, /*String*/ topicName) { var synchronized = function() { var count = 0; array.forEach(widgets, function(widget) { if(widget.get("synchronized") === true) { count++} }); return (count == widgets.length); } array.forEach(widgets, function(w) { w.set("synchronized", false); // register onchange handler for each widget in the set w.on("change", function(value) { array.forEach(widgets, function(widget) { if(this !== widget) { widget.set("value", value); widget.set("synchronized", true); } }, this); // needed to publish topic just once per value change across all the widgets in the set if(synchronized()) { array.forEach(widgets, function(widget) { widget.set("synchronized", false); }); // publish topic if any if(topicName) { topic.publish(topicName, value)}; } }); }); } 

3. 注册小部件集以通过sychronize函数进行sychronize ：

    synchronize(set1, "value1-changed"); // synchronize and publish topic when value changes synchronize(set2); // just synchronize 

4. 订阅您在上方注册的topic ：

    topic.subscribe("value1-changed", function(value) { console.log("value1-changed", value); // here you can change value and limits of of `set2` widgets }); 

Answer 2

您是否尝试过dojo.connect。 可以使用方法链接。 因此，当事件在控件中激发时，可以调用多种方法。 除此之外，dojo中还有发布\\订阅机制。 在pub \\ sum模型中，您可以编写方法以订阅简单的消息字符串。 当某个方法发布该字符串时，将调用订阅者方法。

Answer 3

道场。 有状态的是您的朋友... http://dojotoolkit.org/reference-guide/1.7/dojo/Stateful.html