CODEWITHSUNDEEP
polymerpolymer-starter-kit
Rajat Saxena
Rajat Saxena

Reputation: 3915

Polymer: How to pass sub-object as binding to the custom element

Suppose I have created a custom element as follow:

<chat-container messages="{{ messages }}"></chat-container>

messages is an array containing chat messages related to any particular thread or contact.

Now, in my app.js, I have this kind of message array which contains all messages by thread identifiers. How can I pass the messages related to any particular thread identifier(i.e name='Rajat') to <chat-container> element? I have tried nearly all combinations and still nothing is making sense.

 app.messages =  [
     {name: 'Rajat', messages: [{id: 1,message: 'Hello'},{id: 3,message: 'Hello 2'}]},
     {name: 'Himesh', messages: [{id: 2,message: 'Hello'}]},
     {name: 'David', messages: [{id: 4,message: 'Hello'}]}
    ]

I tried to do:

<chat-container messages="{{ app.messages.filter(function(e) { return e.name === 'Rajat'; })[0].messages }}"></chat-container>

and it did not work.

Upvotes: 1

Views: 56

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

Polymer doesn't support such complex binding expression. Move the filter code to a function and call that function from the binding expression. Binding expressions only support .``!, ()

<chat-container messages="{{filter('name', 'Rajat')}}"></chat-container>

where the parent element has a function named filter()

Upvotes: 1

Related Questions