Custom element bind attribute as object not converted

[teckays]

Here's a custom component

<polymer-element name="custom-component" attributes="data">
    <template>
        <h2>{{ data.key }}</h2>
        <-- Case #1: value -->
        <-- Case #2: undefined -->
    </template>
    <script>
        Polymer({
            publish: {
                data: {}
            },
            ready: function(){
                console.log(typeof this.data);
            }
        });
    </script>
</polymer-element>

Calling element:

<custom-element data='{"key": "value"}'></custom-element>
<!-- console.log output: object -->

<custom-element data='{"key": "[[someResponse]]"}'></custom-element>
<!-- console.log output: string -->

Any ideas how to fix this?

Thanks.

[arthurevans]

So you have two very different use cases here. In #1, you're initializing data using an attribute (and Polymer is JSON parsing the value). In #2, you're binding the data property to a string created by concatenating someResponse to some other strings. What you want to do is bind data to an object, like this:

<custom-element data='[[someObject]]'></custom-element> 

(By the way, are you actually looking for a one-time binding here? If not use '{{}}')

In the calling object, you can create this object using a computed property, if you like:

computed: { 
  'someObject': 'createObject(someResponse)'
},
createObject: function(value) {
  return { "key": value } 
}

There are a number of ways you could go about creating the object depending on your use case, but the key factor here is that bindings and static configuration (using attributes) are different beasts. See:

https://www.polymer-project.org/0.5/docs/polymer/polymer.html#published-properties

(Especially the section, "Configuring an element via attributes".)

And

https://www.polymer-project.org/0.5/docs/polymer/binding-types.html#binding-to-polymer-published-properties

(Especially the section "Binding objects and arrays to published properties".)

Hope this helps.

[teckays]

Good example, however, there is one thing I didn't mention, the bind object passed to data attribute comes from an iterated core-ajax response like:

<template repeat="{{ entry in response.result }}">
    <custom-element data='{"title": "[[ entry.title ]]"}'></custom-element>
</tempalte>

How to access the entry variable programatically an build the right object from it? I could obviously pass the entry object entirely as <custom-element data='{{ entry }}'></custom-element> and access the values from there, but I want to keep custom-element independent from the array/object format.

[arthurevans]

In that case, I think your best bet in 0.5 is to use an inline function in the binding. It could be as simple as:

data="{{ transformEntry(entry) }}"

This form will work fine as long as you're not manipulating any of the properties of entry in your code. If you change a property (like entry.title), the transformEntry function won't get called again.

If you do change the properties elsewhere, I'd recommend feeding them directly to the function, which ensures that they get observed for changes:

data="{{ createObject(entry.title, entry.someOtherProp) }}"

This way, if you change entry.title elsewhere in your code, createObject is called and the binding is updated.

[arthurevans]

@kevinpschaaf Not sure what the solution is for this in 0.8. Food for thought.

[teckays]

@arthurevans Thank you for help. I really appreciate it. Will do some implementations to see if they fully fit my case. Cheers!

[tjsavage]

Closing this issue due to age and the release of version 1 of Polymer - please feel free to re-open if this is incorrect.