如何打印聚合物对象的内容(属性)? [英] How do you print the content (attributes) of a Polymer Object?

问题描述

我有点惊讶，我没能找到关于如何执行此操作的解释，因为这似乎是调试的基本要素，但是我在任何地方都找不到如何打印对象属性的信息.聚合物.

I'm a bit amazed I haven't been able to find an explanation for how to do this as it seems like it's fairly elemental to debugging, but I can't find anywhere how to print the attributes of an object in Polymer.

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

I'm learning Polymer and I keep running into situations where I have an object, but I have no idea what the attributes are of the object. (Ex. I print to the window, and I get [object Object]. I've found some explanations for how to print a list of the keys/attributes of an object (I know how to print the values for those keys if I know what they are), but I have no idea how to get the keys if I don't already know the format of my data. Every example presumes you already know what the attributes are.

我看到了建议添加以下脚本的解决方案:

I've seen solutions recommending adding a script like:

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

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

And then they recommend something like this:

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

但是我认为他们必须使用也许更早版本的聚合物.大部分内容来自2014年至今，我知道此后图书馆发生了很大变化.

But I think they must work off maybe an earlier version of polymer. Most are from 2014-ish and I know the library has changed a lot since then.

这是我最接近此代码错误的地方:

This is the closest thing I get to an error with this code:

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

这是示例帖子，推荐了此策略.我知道我可以更深入地研究文档并尝试理解应该返回什么样的响应，但是我很好奇这种情况下的总体策略是什么-我多次想检查一下聚合物是什么建模某事与我的想法.

Here's an example post recommending this strategy. I understand I could dig deeper into the documentation and try to understand what response is supposed to be coming back, but I'm more curious what the general strategy is for this situation - I've multiple times wanted to check to see how polymer was modeling something vs how I thought it was.

推荐答案

您提到的帖子推荐了1.0版后的Polymer不再可用的方法，该方法不支持过滤/管道的语法(截至当前)版本1.5.0).

The post you mention recommends a method that is no longer possible with post-1.0 Polymer, which does not support that syntax of filtering/pipes (as of the current release, 1.5.0).

您可以使用DevTools选择Polymer元素，然后运行 console.dir($0) .可以在以下浏览器(可能是较旧的版本)中使用:

You could use DevTools to select the Polymer element and then run console.dir($0). This works in the following browsers (and maybe older versions):

• Chrome 50
• Firefox 45
• Safari 9.1
• 歌剧39

Chrome和Opera会按排序顺序显示所有键(甚至是从HTMLElement继承的键)，因此，在漫长的键列表中扫描特定于Polymer的属性可能很繁琐.但是，Firefox和Safari会先列出聚合物特定的键，然后再列出继承的键.

Chrome and Opera display all keys (even inherited ones from HTMLElement) in sorted order, so it can be tedious to scan through the long list of keys for a Polymer-specific property. However, Firefox and Safari list Polymer-specific keys first and then the inherited ones.

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

One workaround for Chrome/Opera is to use this snippet:

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

这是记录paper-button属性的 codepen .您不需要单击该按钮.打开浏览器的控制台日志(而不是Codepen控制台)，以查看下面的屏幕快照.您可以展开控制台日志中的字段以查看Polymer对象的属性.

Here's a codepen that logs the attributes of a paper-button. You don't need to click the button. Open the browser's console log (not the Codepen console) to see something like the screenshot below. You can expand the fields in the console log to see the attributes of the Polymer object.

这篇关于如何打印聚合物对象的内容(属性)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！