Обновление метки на основе выбранной опции с использованием Dojo

Question

У меня есть специальное требование с использованием инфраструктуры Dojo: на основе выбранной опции (<option>) Мне нужно обновить ярлык (<label>).

Я ничего не нашел для Dojo, но нашел аналогичный код с помощью JavaScript/jQuery. Например: http://jsfiddle.net/Godinall/Pn8HZ/

Может ли кто-нибудь сказать мне, как достичь того же, используя Dojo?

Answer 1

Хорошо, если для вас работает простой JavaScript, тогда вы можете использовать простой JavaScript.

Если добавить идентификаторы ваших DOM элементов, вы можете использовать модули dojo/on и dojo/dom, например:

require(["dojo/dom", "dojo/on", "dojo/domReady!"], function(dom, on) { 
    var mySelect = dom.byId("mySelect"); 
    on(mySelect, "change", function() { 
     dom.byId("myLabel").innerHTML = mySelect.value; 
    }); 
}); 

В противном случае, вы можете также использовать JQuery-а-подобный синтаксис с использованием нодлистов и dojo/query:

require(["dojo/query", "dojo/NodeList-manipulate", "dojo/domReady!"], function(query) { 
    query("select").on("change", function() { 
     query("label").innerHTML(this.value); 
    }); 
}); 

---

Если вы используете dijit/form/FilteringSelect вместо нормального <select> коробки, то есть использовать dijit/registry для получения экземпляра виджета и использовать метод on() на него, чтобы добавить обработчик событий, например:

require(["dojo/dom", "dojo/ready", "dijit/registry"], function(dom, ready, registry) { 
    ready(function() { 
     registry.byId("mySelect").on("change", function() { 
      dom.byId("lbl").innerHTML = this.get("displayedValue"); 
     }); 
    }); 
}); 

Если вы пытаетесь установить значение текстового поля вместо использования ярлыка, то вы должны установить свойство value узла DOM вместо innerHTML.