Question

我写了一个类DataGridPane，从保存数据网格的ContentPane扩展而来。我有以下问题：

在dojo的request.post.then函数中，this.xxx属性变量无法识别并显示为undefined。为什么会这样？
在我将分割线拖入页面之前，该表格不会显示数据。

define([
    'dojo/_base/declare',
    'dijit/layout/ContentPane',
    'dojo/dom-construct',
    'dojo/_base/lang',
    'dojo/store/Memory',
    'gridx/Grid',
    'gridx/core/model/cache/Sync',
    'dojo/request',
    'dijit/Tooltip', 
    'dojo/domReady!'
], function (
        declare, 
        ContentPane,
        DomConstruct, lang, Store, Grid, Cache, request, Tooltip) {

    DataGridPane = declare('DataGridPane', ContentPane, {
      id:                   "id",
      title:                undefined,
      url:                  undefined,
      requestType:          "json",
      gridContainer:        undefined,
      layout:               undefined,

      constructor:
        function(params) {
           //......
        },

      start: function() {           
           this.gridContainer = DomConstruct.create("div",{
              id:      "gridDiv"
           }, this.domNode);            
           this.createGrid();
      },

      createGrid:
            function() {
                //Q1:I have to save this.layout to another variable, as the following 
                //code in request.post.then didn't see all this.xxx variables
                var layout = this.layout;
                request.post( this.url, {      //Q1:this.url is OK
                      handleAs: this.urlType    //Q1:this.urlType is OK
                    }
                ).then(
                    // Q1:console.log print 3 'undefined'
                    console.log( this.url + this.urlType + this.layout); 
                    function(response){
                      var datalist = [];
                      var length = 0;

                      dojo.forEach(response.items, function(thisText, i){
                        datalist.push(lang.mixin({ id: i+1 }, thisText));  
                        length++;
                      });
                      var store = new Store({
                        data: datalist
                      });       

                      var grid = new Grid({
                        cacheClass: Cache,
                        store: store,
                        structure: layout
                      }, 'gridDiv');    

                      grid.startup();   
                   }, function(error){
                      console.log("An error occurred: " + error);
                   }
               );
            }
            .......
     });

     //Return the DataGridPane object.
     return DataGridPane;
});

问题2是关于回应。我的答复格式如下：

{
  "items":[...],
  "status":[...],
  "description":[...]
}

response.items保持列表显示在表格单元格中; response.status和response.description带有我将在工具提示中使用的其他2个列表。我将这3个列表包含在一个响应中，而不是发送3个单独的请求来提高效率。但是，在加载页面时，表格不显示任何内容。我拖动分割线后，response.items中的项目才会显示。

作为一项实验，我使用了一种更简单的响应格式，如下所示：

 {
   "items":[...]    
 }

当items是响应中的唯一元素时，页面打开时会显示response.items中的项目，但我无法为一个请求检索足够的数据。设计用于解析复杂响应的dojo请求不是吗？

我在this.resize()之后尝试拨打grid.startup()，但似乎没有效果。

Answer 1

评论有点局促，所以我会对所提到的问题进行一些扩展。

问题0：语法错误（由我添加）

仍然存在语法错误。您似乎在console.log的参数列表中插入了.then()语句。删除它，所以你会有这样的东西：

).then(
    // Q1:console.log print 3 'undefined'
    // ------------> You can't have a console.log statement here,
    // ------------> this is the parameter list for then()!
    // console.log( this.url + this.urlType + this.layout); 
    function(response){
       ....
    }, 
    function(error){
       ....            
    });

问题2：类属性无法正常工作

这是一个非常常见的Javascript错误，我建议你看看这些：

基本上，解决这个问题的一种方法是制作局部变量，例如： var layout = this.layout;就像你做过的那样（你经常会看到人们也在做var self = this;）。这是因为函数范围和this关键字的工作方式与您习惯的方法略有不同（请参阅上述链接）。

或者，您可以使用hitch()中的dojo/_base/lang函数将函数“绑定”到this对象。这看起来像下面这样：

define([
    "dojo/_base/lang", // <--------- remember to add this
    /* your other dependencies here... */
], function (
    lang, // <!--------- this too!
    /* your other dependencies here as well, of course.. */
) {
// your other code as before ......

    request.post( this.url, {
            handleAs: this.urlType 
        }).then(
            lang.hitch(this, function(response) {
                // <--------- Now using this.layout etc works here
            }),
            function(error) { /* .... */ }
        );

问题3：在调整窗格大小之前，网格不会显示

当Grid尝试在与DOM分离的DOM节点（或节点具有display: none或类似的东西）中呈现自身时，通常会发生这种情况。您可以尝试通过在将grid._resize()插入DOM后调用setTimeout(function() { grid._resize(); }, 2000);来解决此问题。

作为一个快速测试，你可以做一些愚蠢的事情（尽管不留在那里，它只是为了确定根本原因）：

{{1}}

编辑：好的，我看到你尝试了类似的东西，所以这可能不是问题。

在dojo请求中无法识别的类变量，并且数据不会立即显示

1 个答案: