Polymer 聚合物1.0性能上的奇怪行为

我正在学习聚合物（1.0），请耐心听我说

我使用express.js返回JSON.stringized项的一些数组，并针对每个数组返回它们，因此结果如下（在HTML中）：

这看起来很难看，但那是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>

{{fighter.name}
{{昵称}}
显示昵称





聚合物({
是:"战斗机简介",，
特性：{
战斗机：目标，
昵称：{
类型：字符串，
值：“测试”
}
},
就绪：函数（）{
this.nickname=（this.fighter.nickname！=''）？this.fighter.nickname:“……这家伙没有昵称！”；
},
handleClick:function（）{
警报（这个昵称）；
}
});

现在，有趣的部分是：名称被正确显示，而在我有

{{昵称}

的地方，HTML中的结果就是字面上的

{{昵称}

；然而，如果我点击按钮，我会得到正确的值

我错过了什么

更新：

我在谷歌上搜索了一些东西，用

created

替换了

ready

方法，当然，它不起作用，因为

created

我认为是Polymer 0.5版本的一部分。然后我切换回

ready

方法，现在一切正常。很奇怪

有什么问题吗？有些人出了问题？虫子

更新2:

我又改变了一些东西，但它不起作用，但现在我知道了如何复制错误。因此，这段代码不能正常工作：

dude也被称为{{昵称}

结果是字面上的“{昵称}”

但是，这是正确的：

dude也被称为{{昵称}

结果是实际的昵称

---

因此，将属性放在

span

标记中可以正确地呈现它。发生了什么事？

有几件事我想我可以帮你。首先，通过对属性使用单引号，可以使JSON更具可读性。此外，如果您正在硬编码JSON，则可以包含空格：

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

在上述情况下需要记住的是，在父元素将

fighter

分配给其

fighter

属性之前，

被创建、准备并附加到DOM

要解决此问题，您可以使用观察者，当数据加载到属性中时，观察者会自动执行任务：

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

聚合物({
是:"战斗机简介",，
特性：{
战斗机：目标，
昵称：{
类型：字符串，
值：“测试”
}
},
观察员：[
//这会告诉Polymer监视“战斗机”并开火
//_fighter仅在“fighter”收到
//除未定义值外的值****
"(战斗机)"
],
_战斗机更新：功能（战斗机）{
this.nickname=（this.fighter.nickname | | |'…这家伙没有昵称！）；
}
});

接下来，将属性绑定到HTML。当您绑定到HTML内容时，例如使用

{{property}

，Polymer（当前）在幕后所做的是将

property

直接绑定到

div.innerText

。Polymer还只检查innerText的前两个字符，查看它是否是

{{

或

[[

，如果找不到它们，则不会执行任何操作

---

Polymer团队正在努力使绑定更加健壮，但据我所知，他们还没有宣布任何具体的计划或时间表。目前，解决方案正如您所发现的，只需在

=）中包装一个内联绑定即可。

啊，是的！现在一切都有了意义，尤其是HTML部分的绑定属性。是的，数据是gath在把手的

{{{each}}

部分（通过express.js）中动态编辑，所以我不能对JSON做太多。现在对于

observators

部分，我不需要这样做，而且它仍然有效……请你澄清一下这是做什么的，或者我如何重新创建一个场景，如果没有这个部分，事情将无法工作？谢谢。啊，你正在服务器端循环数据。在这种情况下，我对原始JSON的评论vs绑定将不适用，数据将立即在

ready

中可用。我已更新了我的答案以澄清该场景，现在显示了

dom repeat

在客户端循环数据的常见用例。谢谢！最后一个问题，然后我可以轻松接受您的答案：是否有相关文档？我没有看到

as=“someValue”

的案例，官方文档只有

。当然，您可以在此处阅读

as

属性：

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