javascript - español - Posible error: el cambio de evento se dispara después de widget.set(''options'',[])
widget javascript (2)
Encontré una solución a este problema usando:
myWidget.set(''_onChangeActive'', false); // prevent firing change
myWidget.set(''value'', ''Milan'', false);
myWidget.set(''_onChangeActive'', true); // reset to default
que también funciona cuando se usa .set() consecutivamente en múltiples widgets.
También pasar falso como tercer argumento a .set() funciona si cambia solo un widget a la vez.
s.set(''value'', ''Milan'', false);
Notas: No pude encontrar referencia en la documentación oficial para este tercer argumento usando .set() :
Pregunta relacionada: activación del evento Dojo Select onChange al cambiar el valor programáticamente
require(["dijit/form/Select",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function(Select) {
var options = [{
label: "TN",
value: "Tennessee"
}, {
label: "VA",
value: "Virginia",
selected: true
}, {
label: "WA",
value: "Washington"
}, {
label: "FL",
value: "Florida"
}, {
label: "CA",
value: "California"
}];
var s = new Select({
options: options
}, "target");
s.startup();
s.on("change", function() {
console.log("my value: " + s.get("value"))
});
// updating options
options.push({
label: "MI",
value: "Milan",
selected: true
});
s.set(''options'', options);
s.reset();
s.set(''_onChangeActive'', false); // prevent firing change
s.set(''value'', ''Milan'', false);
s.set(''_onChangeActive'', true);
})
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<div id="target"></div>
</body>
Actualmente estoy usando dijit / form / Select para visualizar una lista de opciones y necesito actualizar programáticamente el contenido para el dijit/form/Select .
Actualmente estoy usando .set(''value'', ...); pero he notado que el change evento se disparó (que en mi caso no se quiere).
Necesito poder actualizar el widget y seleccionar un valor sin haber disparado el evento de change .
El evento de change , afaik, debe activarse solo cuando un usuario "cambie" el valor de la lista de selección haciendo clic en él.
require(["dijit/form/Select",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function(Select) {
var options = [{
label: "TN",
value: "Tennessee"
}, {
label: "VA",
value: "Virginia",
selected: true
}, {
label: "WA",
value: "Washington"
}, {
label: "FL",
value: "Florida"
}, {
label: "CA",
value: "California"
}];
var s = new Select({
options: options
}, "target");
s.startup();
s.on("change", function() {
console.log("my value: " + s.get("value"))
});
// updating options
options.push({
label: "MI",
value: "Milan",
selected: true
});
s.set(''options'', options);
s.reset();
// issue here, the following line trigger event change
s.set(''value'', ''mi'');
})
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<div id="target"></div>
</body>
_setValueAttr también tiene el segundo parámetro - priorityChange . Si lo configura en falso, el evento onChange no se disparará.
De API docs versión 1.6 (ver _setValueAttr en métodos):
_setValueAttr
Sobrescribe dijit.form._FormValueWidget, dijit.form._FormSelectWidget
Establece el valor del widget. Si el valor ha cambiado, active el evento de cambio, a menos que priorityChange se especifique como nulo (¿o falso?)
Por cierto. Si desea agregar una opción, no es necesario reemplazar todo un conjunto de opciones: puede llamar a s.addOption(newOption)
require(["dijit/form/Select",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function(Select) {
var options = [{
label: "TN",
value: "Tennessee"
}, {
label: "VA",
value: "Virginia",
selected: true
}, {
label: "WA",
value: "Washington"
}, {
label: "FL",
value: "Florida"
}, {
label: "CA",
value: "California"
}];
var s = new Select({
options: options
}, "target");
s.startup();
s.on("change", function() {
console.log("my value: " + s.get("value"))
});
// updating options
options.push({
label: "MI",
value: "Milan",
selected: true
});
s.set(''options'', options);
s.reset();
// issue here, the following line trigger event change
s.set(''value'', ''Milan'', false);
})
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<div id="target"></div>
</body>