# Dynamic binding expression

**URL:** <https://discourse.aurelia.io/t/dynamic-binding-expression/1018>\
**Category:** Help Requests\
**Created:** [April 2, 2018, 8:42am UTC](https://discourse.aurelia.io/t/dynamic-binding-expression/1018 "2018-04-02T08:42:13Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![vermilion](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vermilion/32/354_2.png) [@vermilion](https://discourse.aurelia.io/u/vermilion)\
**Post date:** [April 2, 2018, 8:42am UTC](https://discourse.aurelia.io/t/dynamic-binding-expression/1018/1 "2018-04-02T08:42:13Z")

</div>

Following a great article by Ashley Grant ([https://blog.ashleygrant.com/2017/07/09/getting-my-hands-dirty-with-aurelias-binding-engine/](https://blog.ashleygrant.com/2017/07/09/getting-my-hands-dirty-with-aurelias-binding-engine/)) I tried to accomplist task for dynamic binding to expressions coming from my backend server as json. This approach works great until I tried to apply value converters to this rebased binding chain. After that it fails with error “Cannot read property ‘valueConverters’ of undefined”.

My repro gist.run: [https://gist.run/?id=6e8a1ef7825abbfe1ec93242d1adcbbc](https://gist.run/?id=6e8a1ef7825abbfe1ec93242d1adcbbc)  
Could anyone with deep aurelia binding knowledge help? 🙂

---

<div class="post-metadata">

**Author:** ![vermilion](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vermilion/32/354_2.png) [@vermilion](https://discourse.aurelia.io/u/vermilion)\
**Post date:** [April 2, 2018, 1:37pm UTC](https://discourse.aurelia.io/t/dynamic-binding-expression/1018/3 "2018-04-02T13:37:26Z")

</div>

Sorry for confusion - there is local DebugValueConverter in app.js. Just noticed it has the same name as custom element - renamed it to LocalDebug for consistency

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 2, 2018, 10:07pm UTC](https://discourse.aurelia.io/t/dynamic-binding-expression/1018/5 "2018-04-02T22:07:29Z")

</div>

It’s not easy to re-base value converter, as you need to “re-sort” the value converter outside in, unlike binding behaviors, which don’t affect the evaluation. As the name suggested, you only re-base, not re-construct the expression, so I doubt it’s easy. What you can do is to walk through the expression and create a new expression instead of re-basing it.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 2, 2018, 11:37pm UTC](https://discourse.aurelia.io/t/dynamic-binding-expression/1018/6 "2018-04-02T23:37:42Z")

</div>

cc @AshleyGrant  
I have just read Ashely’s post.

I can do it in simpler alternative way, without deep understanding of aurelia-binding.

My approach is to use value converter, not binding behavior. The result is human understandable code, plus more permissive in chain of value converters.

Note: beware the `fromView` expects a simple propertyExpression like `"address.city"`, otherwise the `setExp` will fail. But this doesn’t mean `GetValueConverter` cannot be used for complex expression like `"address.state + ' ' + address.zip"`. You can still use `GetValueConverter` in one-way binding with complex expression, where `fromView` is never called.

**Update: thx for @bigopon’s help, it now works correctly if used in more than 1 place.**

```auto

@inject(Parser)
export class GetValueConverter {
    constructor(parser) {
     this.parser = parser;
    }
    
    toView(_: any, model: any, propertyExpression: string): any {
        let getExp = this.parser.parse(propertyExpression);
        return getExp.evaluate({ bindingContext: model });
    }
    
    fromView(value: any, model: any, propertyExpression: string): any {
        let setExp = this.parser.parse(propertyExpression + ' = $value');
        setExp.evaluate({
          bindingContext: model,
          overrideContext: { $value: value }
        });
        
        return model;
    }
}

```

The downside is the binding is now verbose, you have to call `model` twice in order to pass enough information to the value converter.

```auto
<input value.bind="model | get:model:property.expression | localDebug">

```

See it working here:

> **[Bring your Gists to life with GistRun](https://gist.run/?id=ba86ba3ad3a6b165f19b2e7370d9fc6c)**
>
> GistRun is a site for running, creating and updating GitHub Gists. With GistRun you can easily share Gists on StackOverflow.

---

<div class="post-metadata">

**Author:** ![vermilion](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vermilion/32/354_2.png) [@vermilion](https://discourse.aurelia.io/u/vermilion)\
**Post date:** [April 3, 2018, 8:50am UTC](https://discourse.aurelia.io/t/dynamic-binding-expression/1018/7 "2018-04-03T08:50:20Z")

</div>

Thanks, works like a charm 😊

---

<div class="post-metadata">

**Author:** ![vermilion](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vermilion/32/354_2.png) [@vermilion](https://discourse.aurelia.io/u/vermilion)\
**Post date:** [April 5, 2018, 7:34am UTC](https://discourse.aurelia.io/t/dynamic-binding-expression/1018/8 "2018-04-05T07:34:34Z")

</div>

Just found a problem with this solution - validation fails as validation lib is getting property by binding.sourceExpression

Seems like the ony way is to update sourceExpression somehow…  
Gist here: [https://gist.run/?id=6e8a1ef7825abbfe1ec93242d1adcbbc](https://gist.run/?id=6e8a1ef7825abbfe1ec93242d1adcbbc)

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 6, 2018, 3:14am UTC](https://discourse.aurelia.io/t/dynamic-binding-expression/1018/9 "2018-04-06T03:14:15Z")

</div>

I have no idea how to make `aurelia-validation` to work with that. I am not an `aurelia-validation` user.

But I have something you might be interested.

I have a different view on validation. My view is simple, validation is a function that takes rule and model as input, produces a structured errors object as output. I don’t want my view template doing anything with this kind of model layer logic. So I created something I consider simple enough and flexible enough.

Have a look of my implementation of your gistrun with my own tool `bcx-validation`, the result is clean, flexible, and approachable code.

I updated my previous gistrun.

> **[Bring your Gists to life with GistRun](https://gist.run/?id=ba86ba3ad3a6b165f19b2e7370d9fc6c)**
>
> GistRun is a site for running, creating and updating GitHub Gists. With GistRun you can easily share Gists on StackOverflow.

The current doc of `bcx-validation` is very mathematical, without showing how to use it in Aurelia app. I need to write some nice examples of Aurelia usage in order to promote it to the community. The current doc is not ready for that now.

> **[buttonwoodcx/bcx-validation](https://github.com/buttonwoodcx/bcx-validation)**
>
> Yet another validation tool to validate complex model, but simple and flexible to use. - buttonwoodcx/bcx-validation