Tuesday, December 15, 2015

Aurelia - Leveraging the view model of an included element.

Thanks to everyone on the Gitter channel who helped me get this to work.

I have a simple little component that happens to have its own "api", a method it exports from its viewmodel so that containers can interact with it. I needed to be able to call it, but couldn't figure out how.

The Cheat Sheet clearly indicates that you can use ref to create a reference to a view model, but I never thought about the implications, since the only time I had used ref was to use that reference in the HTML in a view-only control. But this ref that you create is also usable from the view model of the container. That means, I can do this:
    <my-image url.bind="bannerImageUrl" view-model.ref="image"></my-image>

and then reference it from the container javascript, like this:
    this.image.doSomething();

It turns out that using ref just adds that name to your view model, as a reference to that entity. This is pretty cool, since you can do:
  • ref="someIdentifier" or element.ref="someIdentifier" - This gets you the HTML element from the DOM, which means that you can manipulate is from both your HTML and your javascript.
  • attribute-name.ref="someIdentifier" - This gets you the view model for a custom attribute. Since this is a javascript object, you can do anything with it you would expect.
  • view-model.ref="someIdentifier" - This gets you the view model for a custom attribute. Again, this is just javascript, hack away!
  • view.ref="someIdentifier" - This gets you the View object behind the custom element's view. As teh docs say, this is not the DOM element (you use ref for that) but rather a class from the Aurelia framework that you acn leverage to query and manipulate the view. This class is documented in the templating section of the docs.
  • controller.ref="someIdentifier" - This gets you the controller for the custom element. Again, this class is documented in the templating section of the docs.

I think that I shall never plumb the depths of the binding system for Aurelia. There is almost nothing you cannot do, it seems.

1 comment:

אליאב ממן said...

you have a mistake in view-model.ref... it's for custom element not for attribute