Ember / 车把给出 [object Object] 而不是来自 JSON object 的字符串

Question

概览

你好，我正在学习 Ember.js 并且我正在连接到我通过 Wordpress JSON API 插件控制的 Wordpress 站点。

使用插件中的 JSON API 我可以轻松地提取 WordPress post 标题、作者姓名、发布日期、post 摘录，等 post 没有问题。但是，当我尝试使用 post 内容时，我得到 [object Object] 而不是预期的字符串。

直接看我正在处理的 JSON object ，摘录和内容都是 JSON object 中的项目，每个项目都等于一个字符串HTML。两者之间的唯一区别似乎是字符串的长度。使用 {{{excerpt}}} returns 字符串并允许 HTML 正确格式化，而 {{{content}}} 只是打印出 '[object Object]'.

把手模板

<script type="text/x-handlebars" id="post">
  <div class="post">
    <h1>{{title}}</h1>
    <h2>by {{author.name}} <small class="muted">({{date}})</small></h2>

    <hr>

    <div class="below-the-fold">
      {{{content}}}
    </div>
  </div>

HTML 由 Ember

渲染

<div class="post">
  <h1>Sample Post</h1>
  <h2>by Boydbme <small class="muted">(2015-01-10 11:32:36)</small></h2>

  <hr>

  <div class="below-the-fold">
    [object Object]
  </div>
</div>

JSONobject我正在和

一起工作

post: {
    id: 1306,
    type: "post",
    slug: "sample-post",
    url: "#removed_for_stack_overflow",
    status: "publish",
    title: "Sample Post",
    title_plain: "Sample Post",
    content: "<p class="p1"><span class="s1">Lorem harum fuga.</span></p> <p class="p1"><span class="s1">Lorem dolor fuga.</span></p> <p class="p1"><span class="s1">Lorem ipsuuga.</span></p> <p class="p1"><span class="s1">Lorem dolor</span></p> <p class="p1"><span class="s1">Lorem harum fuga.</span></p>",
    excerpt: "<p>Lorem ipsum dolor sit fuga.<a class="read-more" href="#removed_for_stack_overflow">Read More &raquo;</a></p> ",
    date: "2015-01-10 11:32:36",
    modified: "2015-01-10 11:32:36",
    categories: [],
    tags: [],
    author: {},
    comments: [],
    attachments: [],
    comment_count: 0,
    comment_status: "closed",
    thumbnail: "#removed_for_stack_overflow",
    custom_fields: {},
    thumbnail_size: "post-thumbnail",
    thumbnail_images: {}
},

如有任何帮助，我们将不胜感激。我的困惑来自于能够使用 {{{excerpt}}} 并按预期在我的模板中获取一个字符串，但无法对 {{{content}}}.

执行相同的操作

谢谢！

更新：

@rené 在下面的评论中说对了。 {{{content.content}}} 解决了这个问题，因为我正在与内部碰撞 object。

Answer 1

content是一个对象，为了将JS对象渲染成HTML，使用toString()方法凝聚成字符串。在这种情况下是 [object Object]。我猜你想要 JSON 的字符串。您需要执行以下两项操作之一。

使用 JSON.stringify(this.get('post'), null, 2) 制作一个计算属性将 return 一个字符串，或者制作一个把手助手来执行此操作。

Answer 2

content 用于 Ember 和 Ember 数据的一些内部内容，特别是 DS.Model.

中的 Promise 数组和 IIRC

当您在 Handlebars 模板中使用属性时，内部 Ember 会执行类似 this.get(propName) 的操作。在这种特殊情况下，您的 this 对象实际上可能根本没有很多属性，它只是委托给它自己的 content 对象： this.get('excerpt') 只是调用 this.get('content').get('excerpt') 当它注意到当前对象上没有 excerpt 属性。但是，当您请求 content 时，它只是转换为 this.get('content')，确实存在，并且包含一个对象。

很可能，您需要 {{{content.content}}}，但这取决于最终传递给 Handlebars 的 class 实例。

您可以在 Ember Handlebars 中使用 {{log varName}} 来调试此类问题。

Ember / 车把给出 [object Object] 而不是来自 JSON object 的字符串

Ember / Handlebars giving [object Object] instead of string from JSON object

javascript

json

wordpress

ember.js

handlebars.js

概览

把手模板

HTML 由 Ember

JSONobject我正在和

更新：