I'm not sure if the following is possible with a "computed" and a dom-repeat template. I was binding with child and parent properties prior to .9/.8/1.0
<template is="dom-repeat" as="agreementTypeCount" index-as="agreementTypeCountI" items="{{agreementTypeCounts}}">
{{agreementTypeCount.type}}
</template>
Are there any plans to implement string concatenation? It would make life so much easier!
It's currently on the roadmap. However you can also use computed bindings for this.
<template is="dom-repeat" as="agreementTypeCount" index-as="agreementTypeCountI" items="{{agreementTypeCounts}}">
<a href$="{{computeAgreementUrl(style_domain, selectedCountryCode, agreementTypeCount.type)}}">{{agreementTypeCount.type}}</a>
</template>
and then declare it
Polymer({
...
computeAgreementUrl(styleDomain, countryCode, type){
return "/"+styleDomain+"/agreements/#/table/country/"+countryCode+"/type/"+type+"/sort/start-desc/size/10/page/1/";
}
})
Please take note of the $ character next to href. It is recommended that you use attribute binding ($=) to native elements' attributes.
Related
I read carefully these threads
Polymer 1 nested dom-if within dom-repeat not updating when data changes
how to dynamically append an element to dom-if in Polymer?
How to access content of dom-if inside a custom element?
that may have some relation with my question but I didn't manage find any clue if I can do what I want and how.
In my company, there are several flows, each one for each business flow and each step of the flow is a screen coded as a Polymer 1 web component. All them are warraped in a root Polymer component which defines the route.
A simple exemple would be:
my-root-component:
<dom-module id="my-root-component">
<template>
<first-obrigatiory-page which-route={aValueReturnedFromFirstComponent}></first-obrigatiory-page>
<template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromFirstComponent)]]" restamp>
<second-page which-sub-route={aValueReturnedFromSecondComponent}></second-page>
<template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromSecondComponentComponent)]]" restamp>
<third-page ></third-page>
</template>
</template>
</template>
<script>
Polymer({
is: 'my-root-component',
behaviors: [doesntMatterHere],
properties: {
The first dom-if works as expected but the second seems not be taken in account and my third-page component is never showed.
I checked and the equivalent for _isTrueFunction(aValueReturnedFromSecondComponentComponent) is returning true.
Does aValueReturnedFromFirstComponent really return anything, because you should declare the attribute as which-route="{{aValueReturnedFromFirstComponent}}" instead of using simple { }.
Does the whichRoute (note the camelCase) property in the first-obrigatiory-page element have the notify: true property so the variable actually sends back the updated value?
I usually set observers on variables whenever dom-ifs don't update so I can see if they really change or not, and then set the variables myself through the console with document.querySelector('my-root-component').set('aValueReturnedFromFirstComponent', true) so I can see that the dom-if really updates.
A workaround could be to use events, but what you've done should work.
I have a list of paper-checkbox elements inside a core-selector like this
<core-selector id="moduleSelector" multi="true" valueattr="label" notap?="{{true}}" on-core-select="{{selectionSelect}}>
<template repeat="{{modules in moduleslist}}">
<core-label horizontal layout>
<paper-checkbox id="modulecheckbox" checked="{{modules.checked}}" label="{{modules.pname}}"
on-change={{checkboxHandler}} noink></paper-checkbox>
</core-label>
<br>
</template>
</core-selector>
I wish to get the array of selected paper-checkbox labels using this.$.moduleSelector.selected but i get only some index values which are not accurate as per the module list indexes.I need to get the label names.
If I use paper-items instead of checkboxes like below
<core-selector id="moduleSelector" valueattr="label" multi="true" notap?="{{false}}">
<template repeat="{{modules in moduleslist}}">
<paper-item label="{{modules}}"></paper-item>
</template>
</core-selector>
then I can get the proper array values using this.$.moduleSelector.selected
Any help will be appreciated.
You should switch to Polymer 1.0. Polymer 0.5 is a very old and unsupported version. Polymer 1.0 is also much easier to use.
I have a polymer element looking like this:
<polymer-element name="foo" attributes="bar">
<template>
<core-ajax
url="url.php"
params="{{ {last: bar} }}"></core-ajax>
{{bar}}
</template>
</polymer-element>
Though, when I create element, the attribute shows up on the page, but the ajax request is like url.php?last so it seems that variable is undefined.
Also, this.bar returns undefined.
How can I solve that?
Keep in mind core-ajax has been deprecated in polymer 1.0 to iron-ajax.
Anyway, is params bind being resolved properly?
Based on documentation for new iron-ajax element the sintax should be:
params='{"alt":"json", "q":"chrome"}'
I want to pass the current polymer element as an attribute to another element. Using {{this}} returns null. Is there a supported way to access the value of "this" other than creating an attribute that returns the value
Example
<polymer-element name='my-el'>
<template>
<sub-element target={{this}}>
I think no. When a new instance of a polymer element is created, scope for template is the element instance and expressions are evaluated using this scope. So, {{this}} is evaluated using the element instance and expected to be a property on model.
"{{}}" appears to be the solution
I can't find documentation on it, but it works in v0.5 and is used in existing polymer components (core-a11y-keys)
According to the expression scopes section of the Polymer 0.5 documentation, you can use an empty binding expression: "{{}}". Note that this hasn't been documented in Polymer 1.0, so no guarantees, but it appears to still be working.
<polymer-element name="my-el">
<template>
<sub-element target="{{}}"></sub-element>
</template>
</polymer-element>
Alternatively, you can use the parentElement attribute which all polymer elements have. Here's an example from the documentation for using core-a11y-keys for keyboard navigation. Using `parentElement' would look like this:
<polymer-element name="my-el">
<template>
<sub-element target="{{parentElement}}"></sub-element>
</template>
</polymer-element>
Be careful with parentElement though. If you move the element, its parent could change.
I would like to bind attr and attr1 in the following example. These two parameters do not depend on data (other attributes do). When using the binding this way, there is only one shared data object between all 'rows'. I want only the two components of one iteration to be bound together.
<template repeat"{{data in dataList}}">
<component1 attr="{{binding}}" />
<component2 attr2="{{binding}}" />
</template>
My first idea was to bind the attributes to an variable of the data object:
<template repeat"{{data in dataList}}">
<component1 attr="{{data.binding}}" />
<component2 attr2="{{data.binding}}" />
</template>
This solution on the other hand is really ugly, because the model object get's view-only data attached. Because the model lives normally longer than the components, this could cause a huge overhead. Another problem is serialization, which could fail because of the attached data.
Is there any elegant solution? The only one I imagined so far is to wrap the data objects before iterating over the data set. This approach on the other hand would probably make problems with model updates...
Naive thought: Shouldn't be the scope of a variable that is only used inside of a template restricted to this template? In the special case of the repeat template furthermore to one iteration?
You might type-suggest your binding variable being an Object and use it like:
<polymer-element name="my-element" attributes="dataList">
<template>
<ul>
<template repeat="{{d in dataList}}">
<li>
{{d}} ⇒ {{binding[d]}} <!-- Since type-suggested, it works -->
</li>
</template>
</ul>
</template>
<script>
Polymer({
dataList: ['navy', 'maroon'],
binding: {} /* it’s necessary to type-suggest var for Polymer */
});
</script>
</polymer-element>
Please be aware that the snippet above expects different items in dataList. Live preview: http://plnkr.co/edit/ez36BVUPCKW8xRSkGxOM?p=preview
Naive thought: Shouldn't be the scope of a variable that is only used inside of a template restricted to this template? In the special case of the repeat template furthermore to one iteration?
This sounds impossible for me, because (besides that this will overcomplicate the implementation) sometimes one wants to bind the variable in nested template:
<template repeat="{{a in lst}}">
{{bound_here}}
<template id="nested">
{{bound_here}}
...
With what you suggested the binding above becomes impossible.