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

【问题标题】：Synchronize interdependent Dojo widgets/values同步相互依赖的 Dojo 小部件/值
【发布时间】：2012-05-22 20:10:21
【问题描述】：

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

从示意图上看，它看起来像这样：

Slider1 - Input1
Slider2a - Input2a
Slider2b - Input2b

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

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

【问题讨论】：

标签： javascript event-handling dojo dijit.form

【解决方案1】：

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

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

与上述相反，您可以应用loose coupling 原则，这将允许您同步任意数量的小部件，而它们之间没有任何相互引用。这是我的解决方案：

获取对小部件的引用并将它们耦合到集合中 (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];

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)};
            }
        });
    });
}

通过sychronize函数注册要同步的小部件集：

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

订阅你上面注册的topic：

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

【讨论】：

感谢您花时间编写如此详尽的示例。这是完美的。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：