dgrid（onDemandGrid）は初めてボタンをクリックするとロードされますが、2回目のボタンのエラーはクリックされます

Question

これまでのヘルプで、Dojo dgridが動作するようになりました。それを私の休憩サービスからのデータにどのように結びつけるかを考え出しました。

ここで、入力ボックス、ボタンを追加しました。すべてのロジックがボタンクリックで発生します。しかし、入力欄で同じ入力値であっても、ボタンを2回目にクリックすると、エラーが発生します。

ERROR：

はTypeError：StoreMixin.jsに未定義のプロパティ '要素' を読み込めません：絵を含む33

あなたは

私console.logsを見ることができるので、私はこれを読んでHow To reset the OnDemandGridですが、グリッドが存在するかどうかを確認して別のロジックを確認する必要がありますか？毎回新しいものを「新しくする」ことはできないのですか？

CODE：

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'> 
    <label for="lastnameStartsWith">Lastname Starts With:</label> 
    <input id="lastnameStartsWith" type="text" name="lastnameStartsWith" value="Wag" 
      data-dojo-type="dijit/form/TextBox" 
      data-dojo-props="trim:true, propercase:true" /> 
    <br /> 
    <br /> 
     <button id="queryStudentsButton" data-dojo-type="dijit/form/Button" 
     data-dojo-type="dijit/form/Button" 
     data-dojo-props="iconClass:'dijitIconTask'"> 
      <span>Query</span> 
      <script type='dojo/on' data-dojo-event='click'> 
    require([ 
     'dstore/RequestMemory', 
     'dstore/Memory', 
     'dgrid/OnDemandGrid' 
    ], function (RequestMemory, Memory, OnDemandGrid) { 
        var url = '../students/' + dojo.byId('lastnameStartsWith').value; 
        console.log("query students for dataGrid latsnameStartsWith:" + dojo.byId('lastnameStartsWith').value);    

        require(['dojo/request'], function(request){ 
         request.get(url, 
          {headers: {"Content-Type": 'application/json', 
             "username": securityConfig.username, 
             "password": securityConfig.password}} 
           ) 
          .then(function(response){ 
           //console.log("string response=" + response); 
           var respJSON = JSON.parse(response); 
           var respDataForDGrid = respJSON.recordset; 
           console.log("got respJSON back, num rows= " + respDataForDGrid.length);  


           //================================================   
           // Create an instance of OnDemandGrid referencing the store 
           console.log("Debug1");    

           var grid2 = new OnDemandGrid({ 
            collection: new Memory({ data: respDataForDGrid }), 
            columns: { 
             student_id: 'ID', 
             student_firstname: 'First Name', 
             student_lastname: 'Last Name', 
             student_city: 'City', 
             student_state: 'State', 
             student_zip: 'Zip' 
            } 
           }, 'grid2');          

           console.log("Debug2");    

           grid2.startup(); 
           console.log("Debug3");    

          }, 
          function(error){ 
           console.log("Error=" + error); 
           //dom.byId('studentFeedback').value += response; 
          }); 
        }); 
    }); 
      </script> 
     </button> 
<h2>My demoGrid - From JSON RestService (Database)</h2> 
<div id='grid2'></div> 

</div> 

パート2から

私はこのページにあなたのコードとコードの組み合わせを試してみました： How To reset the OnDemandGrid

if (grid2Registered){ 
    console.log("reuse existing grid"); 
    grid2Registered.set('collection', memStore); 
    // refresh: clear the grid and re-queries the store for data. 
    grid2Registered.refresh(); 
    } 
    else{...  

Doc here（https://github.com/SitePen/dgrid/blob/v0.4.3/doc/components/core-components/OnDemandList-and-OnDemandGrid.md）のコメント：

Clears the grid and re-queries the store for data. If keepScrollPosition is true on either the instance or the options passed to refresh, an attempt will be made to preserve the current scroll position. OnDemandList returns a promise from refresh, which resolves when items in view finish rendering. The promise resolves with the QueryResults that were rendered.

Answer 1

この1つは厳しいです！以下に、実際の例を示します。

私はonClick関数の宣言型からプログラム型に切り替えました。宣言型スクリプトはdojoによって解析され、デバッガの下でそれらを調べることはできません（少なくともブレークポイントなどを設定します。どうやってするか）。だから私はそれらを避けるのがよい習慣だと思う。

実際、同じIDでdgridを再インスタンス化したため、実際にはdgridが存在することを検出する方法が必要になります。しかし、トリックがあります：dgridがdijitシステムによって適切に処理されるためには、dijitRegistry拡張と混在する必要があります。詳細は、hereを参照してください。

次に、registry.byId（ 'grid2'）を使用して、dgridがすでに存在することを検出できます。

respDataForDgridの部分をスキップして、代わりにrespJSONを直接使用する必要があります（サーバー側との違い（？） - サーバー側でjson配列を持つ単純なテキストファイルを使用しました）。

<!DOCTYPE HTML><html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Neal Walters stask overflow test</title> 
<link rel="stylesheet" 
    href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" 
    media="screen"> 
<link rel="stylesheet" 
    href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen"> 

</head> 
<body class="claro"> 
    <div data-dojo-type="dijit/layout/ContentPane" 
     data-dojo-props='title:"CustomersGrid"'> 
     <label for="lastnameStartsWith">Lastname Starts With:</label> <input 
      id="lastnameStartsWith" type="text" name="lastnameStartsWith" 
      value="Wag" data-dojo-type="dijit/form/TextBox" 
      data-dojo-props="trim:true, propercase:true" /> <br /> <br /> 
     <button id="queryStudentsButton" data-dojo-type="dijit/form/Button" 
      data-dojo-props="iconClass:'dijitIconTask', onClick: myClick">Query</button> 
     <h2>My demoGrid - From JSON RestService (Database)</h2> 
     <div id='grid2'></div> 

    </div> 
    <script src="dojo-release-1.12.2-src/dojo/dojo.js" 
     data-dojo-config="async:true"></script> 
    <script type="text/javascript"> 
      require(["dojo", "dojo/parser", "dojo/domReady!"], 
      function(dojo, parser){ 
       parser.parse(); 
      }); 
     function myClick(){ 
     var url = 'students/' + dojo.byId('lastnameStartsWith').value, securityConfig = {username: 'john', password: 'Doe'}; 
        console.log("query students for dataGrid latsnameStartsWith:" + dojo.byId('lastnameStartsWith').value);    

        require(['dojo/_base/declare', 'dojo/request', "dijit/registry", "dstore/RequestMemory", "dstore/Memory", "dgrid/OnDemandGrid", "dgrid/extensions/DijitRegistry"], function(declare, request, registry, RequestMemory, Memory, OnDemandGrid, DijitRegistry){ 
         request.get(url,{}) 
          .then(function(response){ 
           console.log("string response=" + response); 
           var respJSON = JSON.parse(response); 
           //var respDataForDGrid = respJSON.recordset; 
           //console.log("got respJSON back, num rows= " + respDataForDGrid.length);  


           //================================================   
           // Create an instance of OnDemandGrid referencing the store 
           console.log("Debug1");    
           var theGrid = registry.byId('grid2'); 
           if (theGrid){ 
            theGrid.set('collection', new Memory({data: respJSON})); 
           }else{ 
            var grid2 = new (declare([OnDemandGrid, DijitRegistry]))({ 
             collection: new Memory({ data: respJSON }), 
             columns: { 
              student_id: 'ID', 
              student_firstname: 'First Name', 
              student_lastname: 'Last Name', 
              student_city: 'City', 
              student_state: 'State', 
              student_zip: 'Zip' 
             } 
            }, 'grid2');          

            console.log("Debug2");    

            grid2.startup(); 
            console.log("Debug3"); 
           }    

          }, 
          function(error){ 
           console.log("Error=" + error); 
           //dom.byId('studentFeedback').value += response; 
          }); 
        }); 
     }; 
      </script> 
</body> 
</html> 

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.