0

私は、フォームに必要なデータ フィールドをユーザーが選択できるようにするアプリケーションに取り組んでいます。私はそれを機能させましたが、フォームフィールドを少し視覚的な構造のためにテーブルに移動しようとすると、問題が発生しました。

  // Now print the form to a new div
  array.forEach(selectedFields, function(item, i) {
      var l = domConstruct.create("label", {
                                    innerHTML: item + ': ',
                                    class: "dataFieldLabel",
                                    for: item
                                });
                                var r = new TextBox({
                                    class: "dataField",
                                    name: item,
                                    label: item,
                                    title: item
                                });
                                var a = domConstruct.toDom("<tr><td>" + l + r + "</td></tr>");
                                domConstruct.place(a, "displayDataForm");

コードを実行すると、必要なフィールドを選択できますが、画面テキストにテキストボックスが描画される代わりに、次のようになります。

[オブジェクト HTMLLabelElement][ウィジェット dijit.form.TextBox, dijit_form_TextBox_0] [オブジェクト HTMLLabelElement][ウィジェット dijit.form.TextBox, dijit_form_TextBox_1]

代わりに画面に出力されます。これは、テキストとオブジェクトの混合物を domConstruct.place に渡しているためだと思います。これを回避する方法についてのアイデアはありますか? ありがとう！

4

3 に答える 3

1

これを試して ：

require(["dojo/_base/array", "dojo/dom-construct", "dijit/form/TextBox", "dojo/domReady!"], function(array, domConstruct, TextBox){
    var selectedFields = ["Foo", "Bar", "Baz"];
    array.forEach(selectedFields, function(item, i) {
        var tr = domConstruct.create("tr", {}, "displayDataForm"),
            td = domConstruct.create("td", {}, tr),
             l = domConstruct.create("label", {
                 innerHTML: item + ': ',
                 'class': 'dataFieldLabel',
                 'for': item
             }, td, 'first'),
             r = new TextBox({
                 'class': 'dataField',
                 name: item,
                 title: item
             }).placeAt(td, 'last');
    });
});

これは、あなたの html にこれがあることを前提としています:

<table id="displayDataForm"></table>

「class」と「for」は JavaScript の文法の一部であるため、必ず引用符で囲んでください。

于 2013-06-25T16:26:01.803 に答える
0

domConstruct関数はウィジェットでは機能しません。HTML を作成してから、入力ノードのクエリを実行し、テスト ボックスを作成できます。

var root = dom.byId("displayDataForm");
domConstruct.place(root, 
    lang.replace(
      '<tr><td><label class="dataFieldLabel" for="{0}>{0}:</label><input class="inputNode"></input></td></tr>', 
      [item])
);

query('.inputNode', root).forEach(function(node){
    var r = new TextBox({
        'class': "dataField",
        name: item,
        label: item,
        title: item
    });
});
于 2013-06-24T17:33:22.427 に答える
0

Craig さん、ご協力ありがとうございます。domConstruct.place の呼び出しで、最初の引数が追加するノードで、2 番目の引数が追加先の refNode であることを除いて、あなたは正しかったです。ありがとうございました。

// Now print the form to a new div
array.forEach(selectedFields, function(item, i) {
    var root = dom.byId("displayDataForm");
    domConstruct.place(lang.replace(
          '<tr><td><label class="dataFieldLabel" for="{0}">{0}: </label><input class="dataField"></input></td></tr>', 
          [item]), root
    );

    query('.dataField', root).forEach(function(node) {
        var r = new TextBox({
            'class': "dataField",
            name: item,
            label: item,
            title: item
        });
    });
});
于 2013-06-25T15:05:18.880 に答える