2

Select 要素を Dojo ストアに接続しようとしています。Select 要素は HTML で宣言されており、いくつかの JavaScript コードでストアを提供しようとしています。

Dojoのドキュメントではこれを推奨していないようで、ストアを使用するときに Select 要素をプログラムで作成することを支持しています。ただし、私は HTML 要素の作成をその動作とは別にしたいので、これは私にとって黄色のフラグです。この場合、Select 要素を HTML に保持し、JavaScript でストアを接続できれば理想的です。

Dojo ドキュメントの記述は、これに対する「ベスト プラクティス」でしょうか? 私はまだ Dojo に慣れていないので、経験豊富な Dojo 開発者からの意見を求めています。

4

2 に答える 2

1

直観的には、select.set("store", store)すべてのウィジェットが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/ZmsY ​​V/

前述のものにいくつかのUXシュガーを追加するdijit/form/Select disabledと、単一のオプション (例: Loading...)とその最終的な目的で作成され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/

于 2012-10-08T14:15:39.233 に答える
0

宣言的に行うと、不適切なストア データ/定義のデバッグがかなり厄介になる可能性があります。さらに、宣言的に構築された select/store の組み合わせに従って同じウィジェットを複数作成しようとすると、奇妙な煩わしさに遭遇する場合があります。例（疑似コード）：

<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" のようなことを行う必要があります。

宣言的な動作を維持したい場合の 1 つのオプションは、ストアと選択の両方にアタッチポイントを設定することです。その後、初期化後に selectwidget.set("store",mystore) を呼び出すだけです。

于 2012-10-08T21:14:38.837 に答える