Dojo domConstruct - 테이블에 행 삽입

Question

양식을 갖기 원하는 데이터 필드를 사람들이 선택할 수 있도록하는 응용 프로그램을 작성 중입니다. 나는 그것을 작동 시켰지만 시각적 구조를 위해 양식 필드를 테이블로 옮기려고 할 때 문제가 발생했습니다.

[객체 HTMLLabelElement] [위젯 dijit.form.TextBox, dijit_form_TextBox_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"); 

내가 좋아하는 화면의 텍스트에 그려지는 텍스트 상자 대신 내가 원하는 필드를 선택할 수 있지만, [object HTMLLabelElement] [위젯 dijit.form.TextBox, dijit_form_TextBox_1]

대신 화면에 인쇄됩니다. 나는 텍스트와 객체가 혼합 된 domConstruct.place를 전달하기 때문에 이것이라고 생각합니다. 이 문제를 해결하는 방법에 대한 아이디어? 감사!

Answer 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> 

을 다음과 같이 일부 "를" "클래스"를 인용하는 것을 잊지 마세요 자바 스크립트의 문법.

Answer 2

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

Answer 3

크레이그 추가 할 바로 첫 번째 인수를 domConstruct.place에 대한 호출에서 제외하고 있었다, 모든 도움을 노드를한다 감사하고, 두 번째 인수에 추가 할 수있는 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 
     }); 
    }); 
});