polymer - 如何打印 polymer 对象的内容(属性)？

Question

我有点惊讶我一直无法找到如何执行此操作的解释，因为它似乎对调试来说相当基本，但我无法在任何地方找到如何打印对象的属性 polymer 。

我正在学习 Polymer，我一直遇到这样的情况:我有一个对象，但我不知道该对象的属性是什么。 (例如，我打印到窗口，然后得到 [object Object]。我找到了一些关于如何打印对象的键/属性列表的解释(我知道如何打印这些键的值，如果我知道它们是什么)，但如果我还不知道数据的格式，我不知道如何获取 key 。每个示例都假定您已经知道属性是什么。

我见过建议添加如下脚本的解决方案:

getKeys : function(o){
    return Object.keys(o);
}

然后他们推荐这样的东西:

<template is="dom-repeat" items="{{ item in obj | getKeys}}">
    {{item}}
</template>

但我认为他们必须解决可能是早期版本的 polymer 。大多数来自 2014 年左右，我知道图书馆从那时起发生了很大变化。

这是我使用这段代码最接近错误的地方:

Polymer::Attributes: couldn`t decode Array as JSON

这是一个 example post推荐这个策略。我知道我可以更深入地研究文档并尝试了解应该返回什么响应，但我更好奇这种情况的一般策略是什么 - 我多次想检查 polymer 是如何建模与我的想法对比。

Answer 1

您提到的帖子推荐了一种方法，该方法不再适用于 1.0 之后的 Polymer，它不支持过滤/管道语法(从当前版本 1.5.0 开始)。

您可以使用 DevTools 选择 Polymer 元素，然后运行 ​​console.dir($0) .这适用于以下浏览器(可能还有旧版本):

• Chrome 50
• 火狐 45
• Safari 9.1
• 歌剧 39

Chrome 和 Opera 按排序顺序显示所有键(甚至是从 HTMLElement 继承的键)，因此扫描一长串键以查找特定于 Polymer 的属性可能会很乏味。但是，Firefox 和 Safari 会先列出 Polymer 特定的键，然后再列出继承的键。

Chrome/Opera 的一种解决方法是使用此代码段:

((o) => {
  let obj = {};
  Object.keys(o).sort().forEach((x) => {
    obj[x] = o[x];
  });
  console.dir(obj);
})($0);

这是一个 codepen记录 paper-button 的属性。您无需单击按钮。打开浏览器的控制台日志(不是 Codepen 控制台)可以看到类似下面的屏幕截图的内容。您可以展开控制台日志中的字段以查看 Polymer 对象的属性。