Polymer 1.0 属性的奇怪行为

Question

我刚开始学习 polymer (1.0)，所以请多多包涵。

我正在使用 express.js 到 return 一些 JSON.stringified 项的数组，并针对每个项，所以结果如下（在 HTML 中）：

<fighter-profile fighter="{"country":"USA","countryFullName":"United States","name":"Frank Mir","nickname":"","zuffa_record":{"wins":"15","losses":"9","draws":0,"no_contest":0}}"></fighter-profile>

它看起来丑得要命，但那是 json。

这是我的组件：

<dom-module id="fighter-profile">

  <template>
    <div>

      <paper-item>
        <paper-item-body two-line>
          <div>{{fighter.name}}</div>
          <div secondary>{{nickname}}</div>
          <div>
            <paper-button raised on-click="handleClick">Show nickname</paper-button>

          </div>
        </paper-item-body>
      </paper-item>

    </div>
    <br />
    <hr />
    <br />
  </template>

  <script>

    Polymer({

      is: 'fighter-profile',

      properties: {
        fighter: Object,
        nickname: {
          type: String,
          value: 'testing'
        }
      },

      ready: function() {
       this.nickname = (this.fighter.nickname !== '') ? this.fighter.nickname : '... the dude has no nickname!'; 
      },

      handleClick: function() {
        alert(this.nickname);
      }

    });

  </script>

</dom-module>

现在，有趣的部分：名称正确显示，而我有 <div secondary>{{nickname}}</div>，HTML 中的结果实际上是 {{nickname}}；但是，如果我点击按钮，我会得到正确的值。

我在这里错过了什么？

更新：

我用谷歌搜索了一些东西，并用 created 替换了 ready 方法，当然，它没有用，因为 created 我认为是 Polymer 0.5 的一部分版本。然后我切换回 ready 方法，现在一切都按预期进行。很奇怪。

好像是什么问题？有些缓存出错了？错误？

更新 2：

我又改了一些东西，但还是不行，但现在我想出了如何重现这个错误。所以，这段代码不能正常工作：

<div secondary>The dude is also known as {{nickname}}</div> 结果实际上是“{{nickname}}”

但是，这可以正常工作：

<div secondary>The dude is also known as <span>{{nickname}}</span></div> 结果是实际的昵称。

因此，将属性放入 span 标记中可以正确呈现它。怎么回事？

Answer 1

这里有几件事我想可以帮到你。首先，您可以通过为属性使用单引号使 JSON 更具可读性。此外，如果您对 JSON:

进行硬编码，则可以包含白色 space

<fighter-profile
  fighter='{
    "country":"USA",
    "countryFullName":"United States",
    "name":"Frank Mir",
    "nickname":"",
    "zuffa_record":{
      "wins":"15",
      "losses":"9",
      "draws":0,
      "no_contest":0
    }
  }'></fighter-profile>

接下来，我将假设 JSON 实际上不是硬编码，并且绑定到另一个数据源。我做出这个假设是因为您的 fighter 属性似乎在 ready 中不可用，正如您所期望的那样。我在此类情况下看到的一个常见问题如下所示：

<template is="dom-repeat" items="{{data}}" as="fighter">
  <fighter-profile fighter="{{fighter}}"></fighter-profile>
</template>

在上述情况中要记住的是，在父元素将 fighter 分配给其 [= 之前，<fighter-profile> 已创建、准备好并附加到 DOM 13=] 属性.

为了解决这个问题，您可以使用观察器，当数据加载到属性:

时自动执行任务

<script>
  Polymer({
    is: 'fighter-profile',
    properties: {
      fighter: Object,
      nickname: {
        type: String,
        value: 'testing'
      }
    },

    observers: [
      // This tells Polymer to watch `fighter` and fire the
      // _fighterUpdated method only after `fighter` receives
      // a value **other than undefined.**
      '_fighterUpdated(fighter)'
    ],

    _fighterUpdated: function(fighter) {
      this.nickname = (this.fighter.nickname || '... the dude has no nickname!');
    }
  });
</script>

接下来，将属性绑定到 HTML。当您绑定到 HTML 内容时，例如使用 <div>{{property}}</div>，Polymer（当前）在幕后所做的是将 property 直接绑定到 div.innerText。 Polymer 也只检查 innerText 的前两个字符，看它是 {{ 还是 [[，如果找不到则不做任何事情。

Polymer 团队正在努力使绑定更加稳健，但据我所知，他们尚未公布任何具体计划或时间表。目前，解决方案正如您所发现的那样，只需将内联绑定包装在 <span> =)

中

Polymer 1.0 属性的奇怪行为

Polymer 1.0 strange behaviour on properties

polymer