Question

我正在学习聚合物（1.0）所以请耐心等待。

我使用express.js返回一些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}};但是，如果我点击按钮，我会得到正确的值。

我在这里缺少什么？

更新

我搜索了一些内容，并将ready方法替换为created，当然，它没有用，因为created我认为是ready的一部分聚合物0.5版。然后我切换回<div secondary>The dude is also known as {{nickname}}</div>方法，现在一切都按预期工作。很奇怪。

似乎有什么问题？有些缓存出了问题？一个错误？

更新2：

我已经改变了一些东西而且它不起作用，但现在我已经弄明白了如何复制这个错误。所以，这段代码DOESN＆T; T正常工作：

<div secondary>The dude is also known as <span>{{nickname}}</span></div> 结果字面意思是＆＃34; {{nickname}}＆＃34;

但是，这可以正常工作：

span 结果是实际的昵称。

因此，在for (i in 2:length(log_return)) { assign(names(log_return[i]), xts(log_return[i], log_return$Date)) }标记中放置属性会使其正确呈现。发生了什么事？

Answer 1

我认为我可以帮助你解决一些问题。首先，通过对属性使用单引号，可以使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>

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

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

在上述情况下要记住的是，在父元素将<fighter-profile>分配给其fighter属性之前，fighter已创建，准备好并附加到DOM。 / p>

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

<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奇怪行为

1 个答案: