Dojo声明式与程序式创建具有商店的Select元素 [英] Dojo declarative vs. programmatic creation of Select elements with stores

问题描述

我试图用Dojo存储连接一个Select元素。 Select元素在HTML中声明，我试图在一些JavaScript代码中给它一个商店。

I'm trying to hook up a Select element with a Dojo store. The Select element is declared in HTML and I'm trying to give it a store in some JavaScript code.

似乎 Dojo文档建议反对这一点，并赞成在使用商店时以编程方式创建Select元素。然而，这是一个黄色的标志给我，因为我喜欢继续创建HTML元素与他们的行为分开。在这种情况下，如果我可以将Select元素保留在HTML中并将其连接到JavaScript中，那将是理想的。

It seems the Dojo documentation recommends against this and is in favor of programatically creating the Select element when using a store. However this is a yellow flag to me because I like to keep creation of HTML elements separate from their behavior. In this case, it would be ideal if I could keep the Select element in HTML and hook up the store in JavaScript.

Dojo中的语句是否真的是最佳实践？我正在寻找经验丰富的Dojo开发人员的意见，因为我仍然让我的脚湿透Dojo。

Is the statement in the Dojo docs really the 'best practice' for this? I'm looking for opinions from experienced Dojo developers as I'm still getting my feet wet with Dojo.

推荐答案

直观地使用 select.set（store，store）将分配/更改存储到dijit，因为所有小部件都是 dojo / Stateful ，但令人惊讶的是它不起作用。

Intuitively one would use select.set("store", store) to assign/change store to a dijit as all widgets are dojo/Stateful, but surprisingly it does not work.

无论如何，有一种方法 select.setStore（store，selectedValue，fetchArgs） 这个（也令人惊讶的）不被废弃并且有效。

Anyway there is a method select.setStore(store, selectedValue, fetchArgs) which (also surprisingly) is not deprecated and works.

定义 dijit / form /选择存储：

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

分配一个商店：

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");       
    });
});

在jsFiddle中看到它： http://jsfiddle.net/phusick/ZmsY​​V/

See it in action at jsFiddle: http://jsfiddle.net/phusick/ZmsYV/

添加一些 UX 上面提到的糖会创建 dijit / form / Select 禁用与单个选项，例如加载... 及其最终期望的宽度：

Adding some UX sugar to the aforementioned I would create dijit/form/Select disabled with single option e.g. Loading... and its final desired width:

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

然后我会调用 setStore（）：

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

看到这个增强版本在工作： http://jsfiddle.net/phusick/xdDEm/

See this enhanced version at work: http://jsfiddle.net/phusick/xdDEm/

这篇关于Dojo声明式与程序式创建具有商店的Select元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！