概述

Question

概述

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

使用插件中的JSON API，我可以轻松地为任何帖子提取WordPress帖子标题，作者姓名，发布日期，发布摘录等等。但是，当我尝试使用帖子内容时，我会返回 [object Object] 而不是预期的字符串。

直接查看我正在使用的JSON对象，摘录和内容都是JSON对象中的项目，每个项目都等于一个HTML字符串。两者之间的唯一区别似乎是字符串的长度。使用{{{excerpt}}}返回字符串并允许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>

Ember的渲染HTML

<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>

我正在使用的JSON对象

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}}}解决了这个问题，因为我正在与内部对象发生冲突。

Answer 1

content用于Ember和Ember Data的一些内部内容，特别是对于Promise数组和IIRC也在DS.Model中。

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

最有可能的是，您需要{{{content.content}}}，但这取决于最后将哪个类实例传递给Handlebars。

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

Answer 2

content是一个对象，为了将JS对象呈现为HTML，它使用toString()方法粘合到一个字符串中。在这种情况下，[object Object]。我猜你想要JSON字符串。你需要做两件事之一。

创建一个使用JSON.stringify(this.get('post'), null, 2)返回字符串的计算属性，或者制作一个可以执行此操作的把手助手。

Ember / Handlebars给出[object Object]而不是来自JSON对象的字符串

概述

把手模板

Ember的渲染HTML

我正在使用的JSON对象

更新

2 个答案: