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原则，这将允许您同步任意数量的小部件，而不需要它们之间的任何相互引用。这是我的解决方案：

获取对小部件的引用并将它们组合成集（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
});

Answer 2

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

Answer 3

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

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

3 个答案: