Geek Answers Handbook

Watch Changes for an Object in Polymer JS

I have an element with a model object that I want to observe as follows:

<polymer-element name="note-editor" attributes="noteTitle noteText noteSlug"> <template> <input type="text" value="{{ model.title }}"> <textarea value="{{ model.text }}"></textarea> <note-ajax-button url="/api/notes/" method="POST" model="{{model}}">Create</note-ajax-button> </template> <script> Polymer('note-editor', { attached: function() { this.model = { title: this.noteTitle, text: this.noteText, slug: this.noteSlug } }, }); </script> </polymer-element>

I want to observe changes in the model, but it seems impossible to use the modelChanged callback in the element and neither in the note-ajax-button element. What's wrong? How can i do this?

I tried to observe the fields separately, but it is not clean at all. The state of the button element that you see there should change depending on the state of the model, so I need to monitor the changes for the object, and not using the properties. Thanks!

+6
source share
3 answers

To observe paths in an object, you need to use the observe block:

 Polymer('x-element', { observe: { 'model.title': 'modelUpdated', 'model.text': 'modelUpdated', 'model.slug': 'modelUpdated' }, ready: function() { this.model = { title: this.noteTitle, text: this.noteText, slug: this.noteSlug }; }, modelUpdated: function(oldValue, newValue) { var value = Path.get('model.title').getValueFrom(this); // newValue == value == this.model.title } });

http://www.polymer-project.org/docs/polymer/polymer.html#observeblock

+11
source

Or you can add an additional attribute to your model, called, for example, 'refresh' (boolean), and each time you change some internal values, also change it just by setting refresh =! refresh, then you can observe only one attribute instead of many. This is a good case when your model includes several nested attributes.

 Polymer('x-element', { observe: { 'model.refresh': 'modelUpdated' }, ready: function() { this.model = { title: this.noteTitle, text: this.noteText, slug: this.noteSlug, refresh: false }; }, modelUpdated: function(oldValue, newValue) { var value = Path.get('model.title').getValueFrom(this); }, buttonClicked: function(e) { this.model.title = 'Title'; this.model.text = 'Text'; this.model.slug = 'Slug'; this.model.refresh = !this.model.refresh; } });
+1
source

what i am doing in this situation, use * char to watch for any property change in my array, here is an example of my JSON object:

 { "config": { "myProperty":"configuraiont1", "options": [{"image": "" }, { "image": ""}] } };

I create the _myFunctionChanged method, and I pass it as the config.options parameter . * , then each property inside the options array is observed inside function _myFunctionChanged

 Polymer({ observers: ['_myFunctionChanged(config.options.*)'] });

You can use the same template with the object, use an array of type config.options instead. . You can just watch the config.

0
source

More articles:


All Articles