余烬/车把给出[对象对象]而不是来自JSON对象的字符串

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

本文关键字：对象 字符串 JSON 余烬      更新时间：2023-09-26

概述

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

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

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

车把模板

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

content被

Ember和Ember Data用于一些内部的东西，特别是用于DS中的Promise数组和IIRC。型。

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

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

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

content是一个

对象，为了将JS对象呈现为HTML，它使用toString()方法凝聚成一个字符串。在这种情况下，这是[object Object].我猜你想要一串 JSON。您将需要执行以下两件事之一。

创建一个计算属性，该属性将使用 JSON.stringify(this.get('post'), null, 2) 返回字符串 或者创建一个车把帮助程序来执行此操作。

相关文章：