同步相互依赖的Dojo小部件/值 [英] Synchronize interdependent Dojo widgets/values

问题描述

我将要建立一个简单的按揭计算器，用户要在输入栏中调整一些滑块或编辑值，以便根据提供的数据计算一些最终值。

I'm about to build a simple "mortgage calculator" where a user is to adjust some sliders OR edit values in input fields in order to calculate some final value based on the provided data.

原理上它将如下所示：

Slider1 - Input1
Slider2a - Input2a
Slider2b - Input2b

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

The idea is that the value of the input must be reflected in the slider, and vice versa. In addition, the values and limits of slider 2a/2b and input 2a/2b depend on each other, according to some simple rule.

必须在Dojo中完成，我以前从来没有使用过，尽管Dojo有很好的文档，但这有点压倒一切，所以如果有人能指出我正确的方向，我很感激。

It has to be done in Dojo, which I've never used before, and, even though Dojo has quite good documentation, it is a little overwhelming, so I'd appreciate if someone could point me in the right direction.

推荐答案

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

First of all, here is my solution working at jsFiddle: http://jsfiddle.net/phusick/HCx3w/

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

You can use dojo/aspect, dojo/topic and dojo/Stateful and directly connect those widgets to each other in various ways. You will probably end up with a tightly coupled set of widgets, i.e. those widgets will know about each other, even if there is no reason a particular widget should have any knowledge about the fact its value is being synchronized with another widget.

与上述相反，您可以申请 松散耦合 原则，这将允许您同步任何数量的小部件，而没有任何相互引用。这是我的解决方案：

Contrary to the aforementioned you can apply loose coupling principle, which will allow you to synchronize any number of widgets without any mutual references among them. Here is my solution:

1. 获取对小部件的引用，并将它们组合成集合（数组）：

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];

同步 function： p>

synchronize function:

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 function：

Register sets of widgets to synchronize via sychronize function:

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

订阅主题您上面注册的

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

这篇关于同步相互依赖的Dojo小部件/值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！