Added attribute -> property synchronization

[tsoffereins]

I added a sync-property to the attribute definition (attribute: { sync: true }) to automatically update the inner property when the attribute is altered after the element is created. In this way your setters will also be called when you change an attribute with JavaScript (or DevTools for that matter).

[csuwildcat]

Question: how is this different than the existing feature that syncs attributes and setters?

[tsoffereins]

There is something? I might have missed it, there is no proper documentation you know... Can you explain me how it works now?

[csuwildcat]

We talk about it in the Say hello to Accessors section of the Getting Started guide:

Say Hello to Accessors

X-Tag has built-in features to deal with attributes, setters, getters, and link them all together to provide a common interface. To use these features, you first add an accessors object to the top level of your xtag.register() definition object. Within this object you can add keys names that will be made available as getters/setters, as seen below. By adding the key attribute, to an accessor, it tells X-Tag to link the setter/getter with the corresponding HTML attribute of the same name. When attributes are linked to a getter/setter, their gets, sets, and state will remain in sync without having to write any additional code.

xtag.register('x-foo', {
  lifecycle:{
    created: function(){
      alert('x-foo in da house!');
    }
  },
  accessors: {
    bar: {
      // the `attribute` property links node.bar gets/sets to the bar="" attribute
      attribute: {},
      get: function(){
        // do something when the getter is accessed
      },
      set: function(value){
        // act on the value being passed to the setter
      }
    }
  }
});

[tsoffereins]

I'd like to apologize. It seems that I was focusing too much to changing attributes in the browser DevTools. Even though such a change does trigger the attributeChanged callback, it doesn't use the setAttribute method and therefore won't update the view. I guess it got a bit confusing.

Do you happen to know if there is a more complete documentation comming up? You don't mention the attribute's default value on the the docs for example, or the boolean.

Thanks for your time.

[csuwildcat]

@tsoffereins other than the details of the Accessors section (I will push something more detailed up today for that), what parts of the library would you most like to see more info about?

[csuwildcat]

@tsoffereins just updated the docs for the Accessors section

[tsoffereins]

Nice! I guess the only missing property to the attribute-object is 'name', right? I found that one pretty useful though.

To be honest I just discovered your library, so I'm still playing around with it. Whenever I'll encounter something that, to my point of view, should be mentioned in the docs, I'll let you know.

[Aurelain]

It seems that I was focusing too much to changing attributes in the browser DevTools. Even though such a change does trigger the attributeChanged callback, it doesn't use the setAttribute method and therefore won't update the view.

As tsoffereins mentioned, this does create some confusion. Are there any easy fixes for this minor isssue? To recap: when changing an attribute value through the DevTools, the setter is NOT invoked, but the attributeChanged callback IS invoked.