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

Synchronize interdependent Dojo widgets/values

本文关键字：小部 Dojo 依赖 同步      更新时间：2023-09-26

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

示意性地，它看起来像这样：

Slider1 - Input1
Slider2a - Input2a
Slider2b - Input2b

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

它必须在 Dojo 中完成，我以前从未使用过，而且，尽管 Dojo 有相当好的文档，但它有点压倒性，所以如果有人能指出我正确的方向，我将不胜感激。

首先，这是我在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函数同步的小部件集：

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

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

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

相关文章：