What's the best way to force a Polymer template to reevaluate?

[k.adam.ch...@gmail.com]

This may not be the right question, so let me describe what I'm running into first with this TODO list example: http://jsbin.com/lecis/4/edit.

So I have a view on list of items. And then an element for each item in the list. When I set something to checked, I want the item to go from the "Unchecked" display to the "Checked" display.

The first problem I ran into was that a change to the item in the list doesn't send a change event to the items array observer. So if anyone knows how to make this part happen, I would LOVE to know! I suspect that it's just not the way observers work here.

So the way around getting an update was that I fired an event from the my-item element. So I get the update in my-filtered-list; however, I'm not sure whats the best way to force the HTML template stuff to update.

I think I cheated by simply making a copy of the array and then re-assigned the array to the new value. That difference caused an update. I was hoping to see if there was a better way to force that.

Or -- is there a different way for which I should organize the code? Like for instance, create two lists -- one for checked and one for unchecked -- and then move items between the two as I get updates.

Thanks

--

Adam

[Steve Orvell]

We'd suggest not using template for this type of conditional display. Instead use css. Here's an example:

http://jsbin.com/jecuto/1/edit

Note that the checked items are simply shown/hidden using css based on the checked state. The advantages are clear. There is virtually no code in this example and the template syntax is very tight.

For completeness, it's possible to "kick" data to force a re-computation. The need can come up when some part of an object graph changes that's not observed. We're hoping to create a better api for this but here's an example of how you can do it with current techniques:

http://jsbin.com/rodah/1/edit.

Note that the `kick` property is incremented by the event handler and the functions which compute data depend on `kick`.

Again, in this case and many others it's much simpler and better to use css to manage conditional display.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/72f03dba-9889-4a92-aaaf-fd8a195d00f3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[k.adam.ch...@gmail.com]

On Wednesday, August 20, 2014 12:11:10 PM UTC-7, Steve Orvell wrote:

We'd suggest not using template for this type of conditional display. Instead use css. Here's an example:

 

Yeah. This is a good call. Thanks for the extra bit of goodness with this suggestion and it's the right choice for this example.

 

For completeness, it's possible to "kick" data to force a re-computation. The need can come up when some part of an object graph changes that's not observed. We're hoping to create a better api for this but here's an example of how you can do it with current techniques:

The kick is interesting. It's certainly better than creating a clone each time. But no where near as good as the CSS example you gave. But consider me +1 on a better API.

Thanks for the input!

--

Adam