Question

我正在尝试使用Dojo商店连接Select元素。 Select元素是用HTML声明的，我试图用一些JavaScript代码给它一个商店。

似乎Dojo documentation建议不要这样做，并且赞成在使用商店时以编程方式创建Select元素。然而，这对我来说是一个黄色标志，因为我喜欢将HTML元素的创建与其行为分开。在这种情况下，如果我可以将Select元素保留在HTML中并在JavaScript中连接存储，那将是理想的选择。

Dojo文档中的声明是否真的是“最佳实践”？我正在寻找经验丰富的Dojo开发人员的意见，因为我还在用Dojo弄湿自己。

Answer 1

直观地，可以使用select.set("store", store)将商店分配/更改为dijit，因为所有小部件都是dojo/Stateful，但令人惊讶的是它不起作用。

无论如何，有一种方法select.setStore(store, selectedValue, fetchArgs)（也令人惊讶地）不被弃用并且有效。

在没有商店的情况下定义dijit/form/Select：

<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/ZmsYV/

在前面提到的情况下添加一些UX糖，我会创建dijit/form/Select disabled一个选项，例如正在加载... 及其最终所需的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/

Answer 2

在声明性地执行此操作时，调试错误的商店数据/定义会变得非常讨厌。此外，在尝试根据声明性构建的选择/存储组合创建多个相同的窗口小部件时，您可能会遇到奇怪的烦恼。例如（伪代码）：

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

理论上你可以通过将mystore绑定到select来做你想要的，但是如果要创建多个这个小部件，你就会与“mystore”发生id冲突。作为一种解决方法，你必须为jsId和商店的id做jsId =“$ {id} _mystore”之类的事情。

如果您想保留声明性行为，一个选项是为您的商店和您的选择设置附加点，然后您可以在初始化后调用selectwidget.set（“store”，mystore）。

Dojo声明与编程创建具有商店的Select元素

2 个答案: