限制铁表中的dom-repeat数组

Question

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

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

我的html和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.*上的深层子属性观察器。

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

码笔

限制铁表中的dom-repeat数组

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-26 15:54:00

限制铁表中的dom-repeat数组

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-26 15:54:00

解决方案1
0 已采纳 2016-06-26 15:54:00