[1.0] polymer attribute used in a string behaving differently from 0.5

[vikjung]

In 0.5 I created my own element and gave it an attribute that was later used in an href as below - It worked in 0.5 but get blank for attribute in 1.0 when it is put in a string with quotes works separately so know its being passed. Not sure if this is a bug or was I doing it wrong in the first place.

Following worked in 0.5

<polymer-element name="my-element" attributes="my-attrib">
<template>
 <a href="/mysite/hello{{my-attrib}}">

Following fails in 1.0

<dom-module id="my-element" attributes="my-attrib">
<template>
<a href="/mysite/hello{{my-attrib}}">
   </template>
   </dom-module>
        <script>
        Polymer({ is: 'my-element',
                  properties: {
                my-attrib: String
    }});
   </script>

[adalinesimonian]

There are several issues with your code, all easily fixable, though.

First, bindings in Polymer 1.0 work differently now and are more explicit. When you bind to a property using

<my-element prop="{{variable}}">...</my-element>

You aren't binding to the prop attribute on the element itself in the DOM. Instead, you are binding to the prop property inside the my-element's Polymer prototype.

When you want to bind to an element's attribute instead of a property, as is the case with binding to attributes on native elements, which don't have the abstractions that custom elements do, you must use the $= syntax:

<a href$="{{variable}}">...</a>

Second of all, Polymer now resolves my-attrib in the markup to refer to myAttrib in your element's prototype. Thus, your property definition for my-attrib should read myAttrib instead.

The third implicating factor is that Polymer 1.0 no longer supports string concatenation with bindings, meaning that a binding must take up the entirety of the attribute/property or element's content that it is bound to.

Basically, you can't do this anymore:

<a href="/mysite/hello{{myAttrib}}">...</a>

You'd have to do this:

<a href="{{myAttrib}}">...</a>

If you need to concatenate strings for bindings, you can achieve this effect with computed properties. Computed properties are functions in your element prototype which generate a value based on other properties in your element.

Here's a complete (though untested) example based on your code:

<dom-module id="my-element">
  <template>
    <a href$="{{_getHref(myAttrib)}}">...</a>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-element',
    properties: {
      myAttrib: {
        type: String,
        reflectToAttribute: true
      }
    },
    _getHref: function(myAttrib) {
      return '/mysite/hello' + myAttrib;
    }
  });
</script>

[vikjung]

great it worked thanks for the education.

[ufukomer]

@vsimonian My element is not clickable, my code is exactly same with your instance. And I don't get any error in console.

<bindable-link myAttrib="{{variable}}">..</bindable-link>

[ufukomer]

Thats better it works now:

<bindable-link my-attrib="{{variable}}">..</bindable-link>