Asynchronous attribute declaration

[bergie]

I'm looking to expose NoFlo flow-based programming graphs via Web Components.

In flow-based programming, graphs (and components) have a set of named input and output ports, and all interaction goes through them. Mapping those to Web Components could be done via attributes -- one attribute for each exposed port.

Usage could be something like:

<noflo-graph src="/path/to/some.json" someinport="{{ whateverVar }}" someoutportChanged="whateverFunction">

The issue here is however that NoFlo loads the graphs asynchronously, and so we can't necessarily know what ports are going to be available before it is loaded.

One way around this would be to expose two attributes: in and out, and add the ports to those as they become available. But having them available directly would feel more natural.

So, the question here is... would it be possible to register additional attributes asynchronously after a component has been initialized.

Here is an example of NoFlo graph in action on a web page. In this case the graph doesn't expose any ports, though in a more normal scenario the element chooser would probably be something sent from outside the graph.

[sjmiles]

I believe the answer is yes, if I understand your use case.

So, in your example, someinport is not defined in <noflo-graph> and so it's not bindable, is that right?

Because individual nodes can control their own binding behavior, it's possible to write code in <noflo-graph> such that instances can set up such bindings dynamically.

[bergie]

@sjmiles ok, are there any examples of this?

I made a quick proof-of-concept of the NoFlo Polymer component: https://github.com/bergie/polymer-noflo

(see how I'm traversing the attributes there to bind them to appropriate NoFlo inPorts once the graph is loaded)

Demo for touch devices in http://bergie.iki.fi/polymer-noflo

[sjmiles]

Sorry to let this sit so long.

There are no examples, I have only low-level information for you. If you are willing to experiment I will endeavor to make sure you are ultimately successful. :)

In bindMDV.js there is a function called, simply, bind.

This function is referenced in Polymer base, and so it exists on all Polymer elements (e.g. myElement.bind). MDV supports bind method to allow an element to control binding behavior.

By overriding this method (i.e. making your own bind method on your element) you should be able to achieve what you want.

It's possible all you really need to do is override propertyForAttribute, but that's not exposed on the prototype (which is now a bug [#160]). For now you may instead have to copy much of the boilerplate bind into your override to make the necessary changes.

I note you also do not have access to registerBinding (also in bug [#160]), so you will have to leak memory (slightly!) until we fix that.

Thank you for broaching this advanced use case.

[bergie]

@sjmiles thanks for pointing me to the right direction! I'll take some time next week to poke around. If I find a good solution, I'll document it. And maybe we could have a async version of property binding integrated into Polymer at some later point based on that?