聚合物重复工作但不打印值

Question

过去几天我一直在 Electron 应用程序中使用 Polymer，但我有点卡住了，我有一个 dom-repeat 似乎可以工作，但它不会输出任何其中的对象的值。我做错了什么？

这是元素：

<link rel="import" href="../../../bower_components/polymer/polymer.html" />

<dom-module id="account-list">

  <template>
    <ul class="accounts">
      <li class="all_inboxes mailbox account">
        All Mailboxes
      </li>
      <template is="dom-repeat" items="{{accounts}}" as="connected_account">
        <li class="account">
          <img src$="https:{{connected_account.gravatar}}">
          {{connected_account.account.user}}
          <ul class="mailboxes">
            <template is="dom-repeat" items="{{connected_account.mailboxes}}" as="mailbox">
              <li class="mailbox">
                {{mailbox.name}}
                <span class="mailbox--badge">{{mailbox.box.messages.new}}</span>
                <span class="mailbox--status">{{mailbox.ready}}</span>
              </li>
            </template>
          </ul>
        </li>
      </template>
    </ul>
  </template>

  <script>
    'use strict'

    Polymer({
      is: 'account-list',

      ready: function ready() {
        this.accounts = []

        // Get the IMAP connector.
        let ImapConnection = require('./backend/email/imap')

        // Get the inbox class.
        let Mailbox = require('./backend/email/mailbox')

        // Get the accounts to get inboxes for.
        let imap_accounts = require('./backend').database.getAccountsList()

        // Get the gravatar lib so we can get urls for each account.
        let gravatar = require('gravatar')

        // Open all the inboxes.
        imap_accounts.forEach(function(account) {
          // Create a server for this account.
          const server = new ImapConnection(account)

          // Create an account object to render from.
          let connected_account = {
            account: account.toJSON(),
            mailboxes: [],
            gravatar: gravatar.url(account.user)
          }

          // Get this connections mailboxes.
          server.getMailBoxes(function(mailboxes) {
            connected_account.mailboxes = mailboxes

            // Push the account to the array.
            this.push('accounts', connected_account)
          }.bind(this))
        }.bind(this))
      }
    })
  </script>
</dom-module>

这就是它的全部输出（减去标记）：

All Mailboxes
 {{connected_account.account.user}}
{{mailbox.name}} false
{{mailbox.name}} false
{{mailbox.name}} false
{{mailbox.name}} false
{{mailbox.name}} false
{{mailbox.name}} false
{{mailbox.name}} false
{{mailbox.name}} false
 {{connected_account.account.user}}
{{mailbox.name}} false
{{mailbox.name}} false
{{mailbox.name}} false

这是数据结构：

account: Object
    host: "imap.gmail.com"
    name: "accounts"
    password: "nopassword"
    port: 993
schema: Object
tls: true
user: "fake@gmail-address.com"
__proto__: Object
gravatar: "//www.gravatar.com/avatar/123"
mailboxes: Array[8]
    0: Mailbox
        box: Object
        callQueue: Set
        connection: Connection
        name: "Deleted Messages"
        ready: true
        __proto__: Object

Answer 1

确保在绑定元素的文本内容时该元素内没有其他内容。例如，在下面的代码中截取了 li 项包含数据绑定和 span。

          <li class="mailbox">
            {{mailbox.name}}
            <span class="mailbox--badge">{{mailbox.box.messages.new}}</span>

您可以通过将绑定包装在另一个元素中来解决此问题（例如 span）。

          <li class="mailbox">
            <span>{{mailbox.name}}</span>

另一件不起作用的是<img src$="https:{{connected_account.gravatar}}">。绑定必须跨越整个属性。如果你想连接一个字符串，你目前必须使用 computed bindings.

聚合物重复工作但不打印值

Polymer repeat working but not printing values

javascript

polymer

electron