javascript - Dojo 省略函数延迟错误？

Question

我在 JavaScript + dojo 中的一段代码有问题。我正在制作一个给定一定高度和字符串的小部件，如果字符串溢出，该小部件会显示该字符串，并在末尾添加省略号。有两种使用此小部件的方法，您可以向其提供实际的字符串，也可以为其提供文本文件的 URL。

问题是，如果您将实际的字符串提供给小部件，它会失败，但如果您给它 URL，它就会完美地工作。代码如下:

define(["dojo/_base/declare","dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./template/template.html", "dojo/_base/xhr", "dojo/dom-style", "dojo/_base/lang"],

function(declare, WidgetBase, TemplatedMixin, template, xhr, domStyle, lang){

 return declare([WidgetBase, TemplatedMixin], {

        templateString: template,

        textSrc: "",

        content: "",

        height: 100,

        ellipsis: "...",

        endPoint: "Read more...",

        postCreate: function(){
            this.inherited(arguments);

        },

        _setHeightAttr: function(av) {
            this._set("height", av);
            domStyle.set(this.domNode, "height", this.height +"px");
        },

        _setContentAttr: function(av) {
            this._set("content", av);
            if(this.content!=""){
            this._addText(this.content);
            }
        },

        _setTextSrcAttr: function(av) {

            this._set("textSrc", av);
            if(this.textSrc!=""){
                var articleText = xhr.get({
                    url: this.textSrc,
                    handleAs: "text"
                });
                var domNode = this;
                articleText.then( function(text){
                    domNode._addText(text);
                });
            }
        },

        _addText: function(text){
            var index = 0;

            while( this.measureNode.scrollHeight < this.height && index < text.length )
            {       
                this.containerNode.innerHTML += text.charAt(index);
                index++;
            }

            if(index < text.length){
                this.containerNode.innerHTML = text.substring(0,index-1);
            }
            else{
                this.ellipsisNode.innerHTML = "";
                this.endPointNode.innerHTML = "";
            }
        }   

    });
})

因此，这个小部件的工作原理本质上是，如果我调用 content 而不是 textSrc，则 content 中的字符串将发送到 addText() 来显示它。否则，xhr 读取 textSrc 的 URL 并将 URL 中的字符串发送到 addText()。 addText() 从字符串中添加一个字符，直到 measureNode 高度超过所需高度(containerNode 在measureNode 中)或没有剩余字符。末尾会有省略号和“阅读更多” anchor 的空间。现在的问题是使用内容永远不起作用，这里有一些“症状”

1. 即使溢出也会显示整个字符串
2. 原因是 this.measureNode.scrollHeight 始终为 0。这很奇怪，因为当我将其与 textSrc 的 URL 一起使用时，它会生成预期的数字。

我只向 textSrc 和 content 提供一个字符串，因此类似于 _setContentAttr 和 中的 this._addText("blah blah blah blah ...")在 textSrc 中添加 domNode._addtext("etc") ，结果是一样的。此外，我还用内容替换了使用 textSrc 调用此小部件时的实例，反之亦然，只有 textSrc 成功。这意味着这不是 CSS 问题。我的猜测是，它与 deferred 有关，因为 xhr 推迟了 textSrc addText 命令的执行，而 content 则没有。谁能向我解释一下发生了什么事以及如何解决这个问题？

编辑:所以我认为我将问题隔离为小部件中 domNode 的 offsetHeight、clientHeight 未激活，因为可能 html 尚未渲染然而。推迟 URL 是有效的，因为那时渲染已经完成。但我仍然找不到合理的解决方案。 postCreate 事件由于某种原因不起作用。有人知道解决方法吗？谢谢!

Answer 1

好吧，我明白了。因此，我怀疑 postCreate 和 _set(something)Attr 是在小部件的变量创建过程中发生的。该小部件的容器使用 placeAt 命令将小部件放入其中。然而，在调用 placeAt 之前调用了 _addText(...)，因此小部件正在计算 clientHeight，而实际上它根本不存在于页面尚未。我所要做的就是将 _addText(...) 调用移到小部件的容器 placeAt 调用之后，一切正常。