我在 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 的空间。现在的问题是使用内容永远不起作用,这里有一些“症状”
- 即使溢出也会显示整个字符串
- 原因是 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
事件由于某种原因不起作用。有人知道解决方法吗?谢谢!
最佳答案
好吧,我明白了。因此,我怀疑 postCreate
和 _set(something)Attr
是在小部件的变量创建过程中发生的。该小部件的容器使用 placeAt
命令将小部件放入其中。然而,在调用 placeAt
之前调用了 _addText(...)
,因此小部件正在计算 clientHeight
,而实际上它根本不存在于页面尚未。我所要做的就是将 _addText(...)
调用移到小部件的容器 placeAt
调用之后,一切正常。
关于javascript - Dojo 省略函数延迟错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13056865/