Question

我正在处理应用程序的公共消息传递部分。我正在迭代要显示的对话（数组）集合，每个对话都包含对话的实际消息作为数组，所以类似于：

   [
       ...
       messages: 
       {
         content :"Yo what's up",
         fromUserId:"X7uFeXpm8NtgocQXJ",
         time:"Sun 26 at 19:41",
       }
       ...
   ]

我的HTML＆amp; js看起来像这样：

<iron-list items=[[publicMessages]]>
  <template>

      <paper-card elevation='2'>
        <template is='dom-repeat' items='[[limitMessages(item.messages, item)]]'>
          <paper-item>
            [[item.content]]
          </paper-item>
        </template>
        <paper-button on-tap='loadFullConversation'>Load entire conversation</paper-button>
      </paper-card>

  </template>
</iron-list>


limitMessages: function(messages, item) {
  if (!item.messageLimit) {
    messages = messages.slice(0, 3);
  } else {
    messages = messages.slice(0, item.messageLimit);
  }
  return messages;
},
loadFullConversation: function(e) {
  e.model.set('item.messageLimit', 1000);
},

可以在这里找到一个jsfiddle： https://jsfiddle.net/kv1vvvw9/1/

我试图绑定到一个属性（虽然它与整个组件绑定但不起作用）并试验模型，但我无法让它工作。如果我更新模型，如何确保limitMessages将重新运行？

请注意，原始邮件集合不包含item.messageLimit。我在视图部分自己定义了这个。我不认为将它放入数据库插入中是有意义的。

Answer 1

您可以将item.messageLimit属性移至item.messages.limit：

loadFullConversation: function(e) {
  e.model.set('item.messages.limit', 1000);
}

...并将items绑定到item.messages.*上的deep sub-property observer。

<template is='dom-repeat' items='[[limitMessages(item.messages.*)]]'>

当loadFullConversation()设置item.message.limit时会通知观察者，这会更新模板转发器中的items。

HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties: {
      publicMessages: {
        type: Array,
        value: _ => [new Message(), new Message()]
      }
    },
    loadFullConversation: function(e) {
      e.model.set('item.messages.limit', 1000);

      // Tell list to resize to fit the expanded card
      this.$.list.notifyResize();
    },
    limitMessages: function(change) {
      const limit = (change.path === 'item.messages.limit') ? change.value : 3;
      return change.base.slice(0, limit);
    }
  });

  function randContent() {
    const lorem = ['Lorem ipsum dolor sit amet',
                 'consectetur adipiscing elit',
                 'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                 'Ut enim ad minim veniam',
                 'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
                 'Excepteur sint occaecat cupidatat non proident',
                 'sunt in culpa qui officia deserunt mollit anim id est laborum.'
                ];

    return lorem[Math.floor(Math.random() * lorem.length)];
  }

  function Message() {
    var messages = [];
    for (let i = 0; i < 5; i++) {
      messages.push({ content: randContent() });
    }
    this.messages = messages;
  }
});

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-card/paper-card.html">
  <link rel="import" href="iron-list/iron-list.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-card {
          border: solid 1px lightgray;
        }
      </style>
      <iron-list id="list" items=[[publicMessages]]>
        <template>
          <paper-card elevation='2'>
            <template is='dom-repeat' items='[[limitMessages(item.messages.*)]]'>
              <paper-item>
                [[item.content]]
              </paper-item>
            </template>
            <paper-button on-tap='loadFullConversation'>Load entire conversation</paper-button>
          </paper-card>
        </template>
      </iron-list>
    </template>
  </dom-module>
</body>

codepen

限制铁列表中的dom-repeat数组

1 个答案: