1

我对 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 会读取 的 URL 并将 URL 中textSrc的字符串发送到addText(). addText()从字符串中添加一个字符，直到measureNode高度超过所需高度（containerNode在 measureNode 中）或没有剩余字符。最后会有一个省略号和“阅读更多”锚点的空间。现在的问题是使用内容永远不会起作用，这里有一些“症状”

  1. 即使有溢出也会显示整个字符串
  2. 原因是 this.measureNode.scrollHeight 始终为 0。这很奇怪，因为当我将它与textSrc.

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

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

4

1 回答 1

0

好吧，我想通了。因此，正如我怀疑postCreate并_set(something)Attr在您的小部件的变量创建过程中发生的那样。此小部件的容器使用placeAt命令将小部件放入其中。然而_addText(...)，在被调用之前被调用，因此当它甚至不存在于页面上时，placeAt小部件正在计算。clientHeight我所要做的就是_addText(...)在小部件的容器placeAt 调用之后移动调用，一切正常。

于 2012-10-25T18:00:06.290 回答