Using expressions inside elements, to add an attribute.

[Sam Carecho]

Does Polymer evaluates expressions inside shadow DOM tags, with the purpose of adding attributes to an element?

For example, should this work? (I tried and it did not)

<template>
    <div id="ct" {{ propContainingAttributeName }}></template>
</template>

Is there a proper way of inserting attributes on an Shadow DOM element using Polymer?

Based on the results of my test, it seems that for now expressions are only evaluated if typed on an attribute value place holder or as a part of the inner HTML of an element.

<div id="ct" class="{{ expression1 }}"> {{ expression2 }}</div>

Expressions typed inside the declaration of an element (e.g <div {{ expression }} ></div>) are not evaluated.

Would this be a desirable Polymer feature?

Is this something possible to accomplish, regarding the involved architecture?

Cheers,

Sam 

[Brian Geppert]

You need to do something like:

<div attribute?="{{ expression }}"></div>

That will add the attribute “attribute” to the dig iff the expression evaluates to something truthy.

Cheers,
Brian

[Sam Carecho]

Fellows,


I created a jsbin with an extraction of my testing code to exemplify what I have brought.
http://jsbin.com/vegocevubi/1/edit?html,output

You can see that the expression on #d1 is not evaluated.
Neither is evaluated the expression on #d4, but the onClick event is added to the element and it is functional.

Conclusion, Polymer recognizes some keywords (e.g. on-click), but will not evaluate an expression that is not placed inside an attribute's value place holder (attribute="value_place_holder") or that is not part of the inner HTML of and element (e.g <div>{{ expression }}</div>).

Cheers,

Sam

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/3a81aafd-c729-432b-957e-0b7687df85c2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Arthur Evans]

You're correct, data binding doesn't work in arbitrary places in the markup. You can use data binding expressions:

- in the text content of a tag.

- in an attribute value.

Binding to the attribute value has a few different effects, depending on the attribute you're binding to. 

See:

https://www.polymer-project.org/docs/polymer/binding-types.html#node-bindings

The on-<event> declarative event handlers are really just a special case of data binding (although they only allow method names, not full expressions).

Regards,

Arthur

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAEhtDsjknF6TK5qwDhU5%2B5C_s311sKuyguY_eKFQ%2B-OnEsgeXQ%40mail.gmail.com.