Entwine: class properties?

[Uncle Cheese]

I'd like to store something akin to class properties in my entwine definition. These are variables that are used by all methods bound to the selector. This is what I came up with:

$('.myselector').entwine({

  onmatch: function() {

    this.container = this.closest('form')

  },

  onchange: function() {

    console.log(this.container) // undefined

  }

});

Am I misusing the tool? It just seemed more efficient than running a new query every single time I need that object.

[Hamish Friedlander]

Entwine has specific support for Properties.

Here is your example re-written to use them. In this example each element that matches ".myselector" will have it's own property called Container, which is set and gotten via the getter methods setContainer & getContainer.

$('.myselector').entwine({

  Container: null,

  onmatch: function() {

    this.setContainer(this.closest('form'));

  },

  onchange: function() {

    console.log(this.getContainer()) // undefined

  }

});

However you should avoid using onmatch if possible - it can get quite slow when there are a lot of them. Here is a useful pattern that lazily sets the Container property the first time it's looked up, and then uses the set value after that:

$('.myselector').entwine({

  Container: null,

  getContainer: function() {

    var container = this._super();

    if (!container) this.setContainer(container = this.closest('form'));

    return container;

  },

  onchange: function() {

    console.log(this.getContainer()) // undefined

  }

});

Hamish Friedlander

--
You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
To view this discussion on the web visit https://groups.google.com/d/msg/silverstripe-dev/-/ar4S3CSTZEgJ.
To post to this group, send email to silverst...@googlegroups.com.
To unsubscribe from this group, send email to silverstripe-d...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/silverstripe-dev?hl=en.

[Uncle Cheese]

Brilliant! Assume the capitalized property name is compulsory in order to get caught by the magic get/setXXX methods?

Another quick question about specificity...

$('#MyForm').entwine({

  getMyProperty: function() { .... }

});

$('#MyForm select').entwine({

  onchange: function() {

    console.log(this.getMyProperty()) // returns undefined

  }

});

Should the second selector inherit that parent method?

[Hamish Friedlander]

Brilliant! Assume the capitalized property name is compulsory in order to get caught by the magic get/setXXX methods?

No, the property value just has to not be a function. You _should_ capitalise it though, otherwise the getXxx will be getxxx which looks stupid.

You should also make sure any default value is a scalar, not an array or object, because Entwine won't clone it for you - so if you do use an object as the default all your elements will have the same instance initially.

 

Another quick question about specificity...

$('#MyForm').entwine({

  getMyProperty: function() { .... }

});

$('#MyForm select').entwine({

  onchange: function() {

    console.log(this.getMyProperty()) // returns undefined

  }

});

Should the second selector inherit that parent method?

Inheritance is just on the specific element. #MyForm select is a child element of #MyForm, not a more specific version of #MyForm, so won't inherit from it.

Another common pattern:

$('#MyForm *').entwine({

  getForm: function(){ return this.closest("#MyForm"); }

});

$('#MyForm select').entwine({

  onchange: function() {

    console.log(this.getForm().getMyProperty());

  }

});

Closest is actually really fast, so unless you're in an animation loop or something I wouldn't worry about the speed of repeating the selection.

Hamish Friedlander