Polymer 1.0: trouble with data-binding against plain Javascript object

1
votes

Using the polymer-starter-kit-1.0 (to get going more quickly) I am trying to establish data-binding against plain Javascript objects (instead of other Polymer custom-elements).

This seems to only get the initial value of the property I am binding to.

For simplicity: I added a "test" object with a Name property to the main app object, 

  app.test = { 'Name': 'John Doe' }

and then added a element on the home page like this: 

  <h3>App Name: <span>[[test.Name]]</span></h3>

This will display the initial value properly ('John Doe').

When I now change the Name of that Javascript object from Javascript code directly, (on-click event of a button) as in app.test.Name = 'Jim Smith' then nothing changes in the one-way bindings.

However, if I add an input element like this:

  <input value="{{test.Name::input}}" />

Then the span element will get updated properly when text is changed in the input element.

It is as if changes made directly from Javascript are not observed by Polymer.

What am I doing wrong?

3
data-bindingpolymer

3 Answers

2
votes

It looks like you may have not used the bindings property properly. It doesn't look like access to the polymer host object is an issue since you're using the "app" variable... which I believe is the template/dom-bind tag.

Use the host.set(path,value) to set objects and have them propagate changes.

This example should help: http://jsbin.com/daloho/2/edit?html,output

1
votes

Answer

You must use this.set('test.Name', newName);.

Explanation

The key feature (and root cause) of your problem is that you are binding to an object path (e.g., test.Name and not simply, say, just test) instead of a simple property (e.g., test) declared inside your Polymer() constructor.

Therefore, per the documentation located here:

For a path binding to update, the path value must be updated in one of the following ways:

  • Using a Polymer property binding to another element.

  • Using the set API, which provides the required notification to elements with registered interest.

0
votes

I think your original problem was the square brackets [[ ]], which results in 1-way data binding, and I think you want 2-way data binding, so use squiggly brackets {{ }}. I've been poring over the Polymer docs for a few days now, and am still struggling with getting stuff from 0.5 to 1.0.

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html