CODEWITHSUNDEEP
aurelia
Lance G
Lance G

Reputation: 144

Aurelia: Programmatically changing reference value doesn't change model

We have a situation where we utilize a component in multiple web pages (a note editor). This note editor takes a value from an input element on the page and places that value into a component where the user can modify it. The user types in the note editor and clicks Submit. The note editor component then passes the new value back to the input on the original page.

We are using the "ref" to pass the value back and forth. Everything works fine except that the model doesn't update when we set the value of the ref from the note editor component. We find we need to type once in order for it update the model. Here is a simple Gist to illustrate our example:

This is just a simple example of programmatically setting the ref's value. Note how "The value of my input is" stays as "Hello" but the input field changes to "Value Changed!!!!" when you press the button.

https://gist.run/?id=fab025d6b99a93f9951b1a6e20efeb5e

A few things to note: 1) We'd like to use Aurelia's "ref" instead of an "id" or "name". 2) We've tried to pass the model instead of the "ref". We can get the value of the model successfully and put it in the note editor, but the model doesn't update when we pass it back.

UPDATE:

We have an answer (thanks!). Here is the code we tried to pass the model (so we wouldn't even need to use the ref). This failed for us.

Here is the View of the page.html

<TextArea value.bind="main.vAffectedClients" style="width:94%;" class="editfld" type="text" rows="6"></TextArea>
<input class="butn xxsBtn" type="button" value="..." click.trigger="OpenNoteDivAurelia(main.vAffectedClients)" />

Here is the View-Model of the page.js

import {NoteEditor} from './SmallDivs/note-editor';
...
@inject(NoteEditor, ...)
export class PageName {
  constructor(NoteEditor, ...)
  {
    this.note = NoteEditor;
    ...
  }


  OpenNoteDivAurelia(myTargetFld)
  {
     this.note.targetFld = myTargetFld;
     this.note.vHidTextArea.value = myTargetFld;
     this.note.show();
  }
}

This part opens our component (note-editor) and successfully places the targetFld value inot our TextArea in the component.

Here is the View-Model when placing the value BACK to page.js/page.html

    CloseNote(populateFld)
    {
      if (populateFld)
      {
         //This is the line that doesn't seem to work
         this.targetFld = vHidTextArea.value;
      }
      this.isVisible = false;
    }

This last function "CloseNote" is the one that doesn't work. The model (which we believe is pointed at this.targetFld) does not get the value of the textarea. It does not error, it simply does not do anything.

Upvotes: 1

Views: 1328

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10887

The events that Aurelia attaches to be notified of an input changing don't fire when you programmatically set the value property on an input. It's simple enough to fire one of these events yourself, though.

export class App {
  mymodel = {"test":"Hello"};

  changeValByRef(myinput)
  {
    myinput.value = "Value Changed!!!!";
    myinput.dispatchEvent(new Event('change'));
  }

}

You actually don't need to pass the ref in to the function, anytime you use the ref attribute, a property is added to your VM w/the name you use in the ref attribute. So the above example could have been accomplished using this.myinput instead of the passed in object, since they're the same.

Here's a working example: https://gist.run/?id=7f96df1217ac2104de1b8595c4ae0447

I'd be interested to look at your code where you're having issues passing the model around. I could probably help you figure out what's going wrong so you don't need to use ref to accomplish something like this.

Upvotes: 7

Related Questions