# Two Way Binding on Custom Attribute Not Working

**URL:** <https://discourse.aurelia.io/t/two-way-binding-on-custom-attribute-not-working/2691>\
**Category:** Help Requests\
**Created:** [June 27, 2019, 8:36pm UTC](https://discourse.aurelia.io/t/two-way-binding-on-custom-attribute-not-working/2691 "2019-06-27T20:36:06Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [June 27, 2019, 8:36pm UTC](https://discourse.aurelia.io/t/two-way-binding-on-custom-attribute-not-working/2691/1 "2019-06-27T20:36:06Z")

</div>

I’m trying to implement [this solution given by jdanyow for dirty checking](https://github.com/aurelia/templating-resources/issues/160). I’m using TypeScript so I’ve adapted as best I can. For some reason, the `isDirty` flag on my VM is not being updated. Here is what I have:

**agency.ts**

```
export class Agency {
    public isDirty : boolean = false;
    public agency : IAgency = null;

    ...
}

```

**agency.html**

```
<template>
   <require from="../resources/attributes/dirty"></require>
    <form dirty.bind="isDirty">
         <div class="input-group">
               <label>Agency Name</label>
               <input type="text" value.bind="agency.name" />
         </div>
         ... 
    </form>
    <div if.bind="isDirty">
         <button>Save Changes</button>
         <button>Undo Changes</button>
    </div>
</template>

```

**dirty.ts**

```
import {bindable, bindingMode} from 'aurelia-framework';

export class DirtyCustomAttribute{
   private view: any;
   private bindings: any[] = [];
   @bindable({defaultBindingMode: bindingMode.twoWay }) value: any;

   static inject = [Element]
   constructor(public element : HTMLElement) {}

   created(view) {
      this.view = view;
   }
   
   bind() {  
    this.bindings = this.view.bindings
        .filter(b => b.mode === bindingMode.twoWay && this.element.contains(b.target));

    let i = this.bindings.length;
    let self = this;
    while (i--) {
        let binding = this.bindings[i];
        binding.dirtyTrackedUpdateSource = binding.updateSource;
        binding.updateSource = function (newValue) {
            this.dirtyTrackedUpdateSource(newValue);
            if (!self.value) {
                self.value = true;
            }
        }
    }
   }

   unbind() { // See code in referenced link }
}

```

So, using logging, I can see that the `updateSource()` code is being called and the `self.value` flag is being set. However, the `div` with the buttons is never displayed. It would seem that the `dirty.bind="isDirty"` is not two-way binding like it should.

I’m sure I’m doing something wrong, but I can’t for the life of me see what it is.

**Update**

I also posted this on StackOverflow. Someone there confirmed that the code, as shown, is working – he created a codesandbox that proves it. So, the one thing that I left out in trying to simplify my code was that the agency vm is being composed by another VM. I don’t understand why that would make a difference, but that is the only noticeable difference between my actual code and what I’ve listed here.

You can [view my SO post](https://stackoverflow.com/questions/56806727/two-way-binding-not-working-on-an-aurelia-custom-attribute) to see the updated code with the `compose` as well as the codesandbox.