Синхронизация взаимозависимых виджетов/значений 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 функция:

   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

dojo. Stateful твой друг ... http://dojotoolkit.org/reference-guide/1.7/dojo/Stateful.html