dojo - tipos - programacion imperativa

Dojo declarativo vs. creación programática de elementos selectos con tiendas

Question

Estoy tratando de conectar un elemento Select con una tienda Dojo. El elemento Seleccionar se declara en HTML y estoy tratando de darle una tienda en algún código JavaScript.

Parece que la documentación de Dojo recomienda no hacerlo y está a favor de crear programáticamente el elemento Seleccionar al usar una tienda. Sin embargo, esta es una bandera amarilla para mí porque me gusta mantener la creación de elementos HTML separados de su comportamiento. En este caso, sería ideal si pudiera mantener el elemento Seleccionar en HTML y conectar la tienda en JavaScript.

¿La afirmación en Dojo es realmente la "mejor práctica" para esto? Estoy buscando opiniones de experimentados desarrolladores de Dojo ya que todavía me estoy mojando los pies con Dojo.

Answer 1

La depuración de los datos / definiciones de la tienda incorrecta puede ser bastante desagradable cuando se hace declarativamente. Además, puede encontrarse con una extraña molestia cuando intente crear múltiples del mismo widget siguiendo una combinación select / store generada declarativamente. Por ejemplo (pseudocódigo):

<div dojotype="dojox.data.QueryReadStore" url="someurl/blah.do" jsId="mystore"/>
<select dojotype="dijit.form.FilteringSelect" store="mystore">
</select>

En teoría, harías lo que deseas al vincular mystore a la selección, sin embargo, si crearas varios de este widget, tendrías un conflicto de id con "mystore". Como solución alternativa, debe hacer algo como jsId = "$ {id} _mystore" para jsId y la id de la tienda.

Una opción si desea mantener un comportamiento declarativo es tener puntos de conexión para su tienda y su selección, luego simplemente puede llamar a selectwidget.set ("store", mystore) después de la inicialización.

Answer 2

Intuitivamente se usaría select.set("store", store) para asignar / cambiar store a un dijit, ya que todos los widgets son dojo/Stateful , pero sorprendentemente no funciona.

De todos modos hay un método select.setStore(store, selectedValue, fetchArgs) que (sorprendentemente) no está en desuso y funciona.

Definir dijit/form/Select sin una tienda:

<select id="select1" data-dojo-type="dijit/form/Select"></select>​

Asignarle una tienda:

require([
    "dojo/ready",
    "dijit/registry",
    "dojo/store/Memory",
], function(
    ready, registry, Memory
) {

    ready(function() {

        var store1 = new Memory({
            idProperty: "value",
            data: [
                { value: "AL", label: "Alabama" },
                { value: "AK", label: "Alaska" },
                { value: "AZ", label: "Arizona" }
            ]           
        });

        var select1 = registry.byId("select1");
        select1.set("labelAttr", "label");
        select1.setStore(store1, "AZ");       
    });
});

Véalo en acción en jsFiddle: http://jsfiddle.net/phusick/ZmsYV/

Añadiendo un poco de azúcar UX a lo anterior, crearía dijit/form/Select disabled con una sola opción, por ejemplo, Loading ... y su width final deseado:

<select
    id="select1"
    data-dojo-type="dijit/form/Select"
    data-dojo-props="disabled:true"
    style="width:150px;"
>
    <option>Loading...</option>
</select>​

Luego lo habilitaba después de llamar a setStore() :

var select1 = registry.byId("select1");
select1.set("labelAttr", "label");
select1.setStore(store1);
select1.set("disabled", false);

Vea esta versión mejorada en el trabajo: http://jsfiddle.net/phusick/xdDEm/