【问题标题】:Helper Function when DOM ready [duplicate]DOM准备好时的辅助函数[重复]
【发布时间】:2016-03-11 08:14:18
【问题描述】:

我目前正在写博客,我希望在添加新文章时有一个预览窗口。所以我有一个自动表单,您可以在其中输入新文章:

<template name = "AddArticle">
<div class = "content-container">
    <div class = "content-wrapper">
        <h2>Add new Article</h2>
        <!--{{> quickForm id="insertArticleForm" type = "insert"}}-->
        {{#autoForm collection="BlogPosts" id="insertArticleForm" type="insert" class = "content-form"}}
            <fieldset>
                {{> afQuickField name="author"}}
                {{> afQuickField name="title"}}
                {{> afQuickField name="description"}}
                {{> afQuickField name="content" rows=15 id = "content-textarea"}}
                <button type="submit" class="btn btn-primary">Insert</button>
            </fieldset>
        {{/autoForm}}
    </div>
</div>
{{> Preview}}

我有这个预览窗口

<template name = "Preview">
<div class = "content-container preview">
    {{>SlideBlock title = 'Preview <button class ="btn btn-default pull-right">Refresh</button>' content = "PreviewContent"}}
</div>

<template name = "PreviewContent">
<div id = "preview-content" class = "content-wrapper">
    <span>{{{content}}}</span>
</div>

这个Helper函数应该将文本从textarea复制到预览窗口中

Template.PreviewContent.helpers({
   content: function(){
    var content = $("#content-textarea");
    console.log(content);
    return content;
   } 
});

问题是,当前输出只是[object Object]。 我相信当dom尚未准备好时,可能会执行辅助功能,但我不确定100%。

编辑:

哦,试了之后忘记重新添加了。 .html() / .val() / .text() 的输出都只返回未定义。

【问题讨论】:

  • 或者,它可能是一个 jQuery 对象实际上......等待它......一个对象,当尝试直接在 HTML 中输出复杂对象时,它们只是被字符串化了浏览器,对象的字符串表示其实是[object, Object]
  • 尝试return content.text(),以获得有意义的东西
  • 试试console.log(JSON.stringify(content));,它会将对象作为json格式的对象树返回。

标签: javascript jquery meteor spacebars


【解决方案1】:

[object Object] 并不意味着 DOM 还没有准备好,您的 API 似乎需要内容而不是对象本身。所以试试

var content = $("#content-textarea").html();

var content = $("#content-textarea").val();

【讨论】:

  • 哦,试了之后忘记重新添加了。 .html() / .val() / .text() 的输出都只是返回 undefined。
  • 控制台上有什么?
  • .html().val() 返回未定义,.text() 返回空字符串
  • var content = $("#content-textarea"); console.log(content); 控制台上的内容是它提供了 textarea 节点吗?
  • 对象 { 上下文:HTMLDocument → AddArticle,选择器:“#content-textarea” }