dgrid (onDemandGrid) 在第一次单击按钮时加载，但在第二次单击按钮时出错

Question

感谢之前的一些帮助，我让 Dojo dgrid 开始工作；甚至想出了如何将它与我的休息服务中的数据联系起来。

现在我添加了一个输入框、一个按钮，所有的逻辑都发生在单击按钮时。但是我第二次单击按钮时，即使输入字段中的输入值相同，我也会收到错误消息。

错误：

TypeError: 无法读取 StoreMixin.js:33

中未定义的属性 'element'

包括图片这样你就可以看到我的console.logs

我读了这个How To reset the OnDemandGrid，但是是否有必要检查网格是否存在并执行不同的逻辑？我不能每次 "new up" 一个新的吗？

代码：

<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{...

这里的文档 (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

这一关很艰难！下面是一个工作示例。

首先，我将 onClick 函数从声明式切换为编程式：声明式脚本由 dojo 解析，因此您无法在调试器下检查它们（设置断点等）（至少我不这样做）知道怎么做）。所以在我看来，避免它们是个好习惯。

那么，确实这个bug是由于用相同的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>

dgrid (onDemandGrid) 在第一次单击按钮时加载，但在第二次单击按钮时出错

dgrid (onDemandGrid) loads on first time button click, but error on second time button is clicked

dojo

dgrid