Property

fastn properties are the link between your components and bindings

Usage on a component:

// Set someProperty to 'foo'
aComponent.someProperty('foo'); -> returns someProperty

// Set the value of someProperty
aComponent.someProperty(); // -> returns 'foo'

creating a property:

properties will automatically be created for all keys passed in settings to a component, eg:

// Automatic property creation:

var aComponent = fastn('div', {
    someProperty: 'foo' // Will automatically be turned into a property with value 'foo'
});

// Manually
var someProperty = fastn.property(defaultValue, optional changesToTrack, optional updaterFunction);

aComponent.setProperty('someProperty', someProperty);

Tracking Changes

By default, fastn propreties will only emit a 'change' event if it's value changes. This means that if a property is set to an object, and you change the objects keys or values, the property wont emit 'change'

You can specify what constitutes a change via the changesToTrack value. fastn properties use what-changed to track changes to their values You can pass a what-changed string to the property and it will be used.

// Track changes to the values type, keys, and shallow values.
// This is handy if you are tracking arrays.
fastn.property(undefined, 'type keys shallowStructure')

Updating on change

properties have an updater function that is used to enact their purpose when their value changes For example, say we want to make a height property that modifys the height of an element:

aComponent.setPropert('height', fastn.property(100, function(height){
    if(isNaN(height)){
        height = 0;
    }

    aComponent.element.style.height = height + 'px';
}))

When the height property's value changes, the updater function will be called.

If the component has rendered, the update function will be called on requestAnimationFrame.

Methods

attach(object or Model, firmness) -> property

Attaches the property to the provided object.

If a Model is passed, attach will use the object that the model is currently attached to.

If a firmness is provided, the property will only be attached if the firmness is equal to or higher than that which it is currently attached at.

Returns the property.

detach(firmess) -> property

Detaches the property from the model it is attached to

If a firmness is provided, the property will only be detached if the firmness is equal to or higher than that which it is currently attached at.

Returns the property.

destroy() -> property

Destroys a property, potentially freeing memory and removing event handlers.

Returns the property.

destroyed() -> boolean

Returns whether the property is destroyed

binding(nothing or binding or path)

If called with no arguments, will return the propertys current binding.

If called with a path or binding, will set the propertys binding.

When the binding changes, the property will be set with the new value.

Returns the property.

updater(function) -> new property

set the properties updater function after initialisation.