Framework: Bind an element attribute with a variable at runtime.

[boogunote]

Require something like, this.element.addAttribute("foo.bind","something")

[Aaike]

we need a compile function to achieve this , similar to document.createElement("my-element")
it comes down to dynamically generating markup and have aurelia compile it.

[devmondo]

:+1:

[EisenbergEffect]

So, it is possible to add bindings dynamically, just isn't a good api for it yet. The strategy is to first grab the element you want the binding to be on. Then search up the dom tree to find the parent with a primaryBehavior property. That has a view property. Next you use the Parser to parse the binding expression into an AST. You then create a BindingExpression object. Set that up with the element, ast, etc. Finally you call bind on it, passing the data context and be sure to add it to the bindings collection on the view.

LOL No problem. See? :smile:

We will keep this issue to track making a nice api like this. Right now we are focusing on locking down the core. Once that's done, we are going to do a bunch of perf work. After that stabilizes the low lever apis, then we can look at putting some high level apis in place for these types of dynamic scenarios.

[EisenbergEffect]

There is a view compiler which can be used. So, we are covered there. We also have a new BindingEngine class that makes it easy to create binding expressions on the fly. Finally, we have the ability to have the View instance passed to the created callback, which can then be used to dynamically add binding expressions. So, I think we have the pieces.

[leon-andria]

:+1:

[kiryaka]

Can you please provide some small example that allow to accomplish this? I have a list of elements. Let's say this.columns. And I want to have if.bind binded to them programmatically. So something like this:

this.columns.map(
  (column, index) => column.addBinding("if.bind",  this.columnsConfiguraion[index].isHidden)
);

[dpinart]

+1 to provide an Example.Once I have created the binding expression how can I attach it to an input's value property in created callback?

[neilculver]

+1 for an example.

[bebor]

example would be fine.

and just to check if this issue is the same what i am looking for, here and example: edit name for different languages:
(for simplicity's sake just in pseudo code)

in VM:

export class EditNameInDifferentLanguages {
{
@bindable currentLang = 'en';
 @bindlable item = { name-en : 'english name', name-fr: 'french name' }
}

in view:

<input value.bind="item | chooseAttribute:X"/>

what i would like to achieve is: when currentLang is changed to 'fr', the binding on the <input> element would change also.
so i would be able to use one input, for editing (binding) 2 differents attributes.

[ibrood]

+1 For an example

[ericguedespinto]

As an idea on how I could use this...
Imagine that I use processContent to add an attribute to the node (I would not need to know what attributes I need as the decision would only be made at compile time using processContent). Then after the element is created, I want to activate binding on it

How is that nice API coming ?