Aurelia:以编程方式更改参考值不会改变模型

Question

我们有一种情况,我们在多个网页(注释编辑器)中使用一个组件.此注释编辑器从页面上的输入元素获取值,并将该值放入用户可以修改它的组件中.用户在注释编辑器中键入并单击"提交".然后,注释编辑器组件将新值传递回原始页面上的输入.

我们使用"ref"来回传递值.一切正常,但是当我们从音符编辑器组件设置ref的值时,模型不会更新.我们发现我们需要输入一次才能更新模型.这是一个简单的要点来说明我们的例子:

这只是以编程方式设置ref值的简单示例.请注意"我输入的值是"是如何保持为"Hello"但输入字段更改为"Value Changed !!!!" 当你按下按钮.

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

有几点需要注意:1)我们想使用Aurelia的"ref"而不是"id"或"name".2)我们试图通过模型而不是"ref".我们可以成功获取模型的值并将其放入注释编辑器中,但是当我们将模型传回时,模型不会更新.

更新:

我们有答案(谢谢!).这是我们尝试传递模型的代码(因此我们甚至不需要使用ref).这对我们来说失败了.

这是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)" />

这是page.js的View-Model

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();
  }
}

这部分打开我们的组件(注释编辑器)并成功将targetFld值放在组件中的TextArea中.

将值BACK放到page.js/page.html时,这是View-Model

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

最后一个函数"CloseNote"是不起作用的.该模型(我们认为指向this.targetFld)不会获得textarea的值.它没有错误,它根本不做任何事情.

Answer 1

当您以编程方式value在输入上设置属性时,Aurelia附加的有关输入更改通知的事件不会触发.但是,它很容易自己解雇其中一个事件.

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

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

}

实际上,您不需要将ref传递给函数,只要您使用该ref属性,就会在您的VM中添加一个属性,该属性具有您在ref属性中使用的名称.因此,上述示例可以使用this.myinput而不是传入的对象来完成,因为它们是相同的.

这是一个有效的例子:https://gist.run/？id = 7f96df1217ac2104de1b8595c4ae0447

我有兴趣看看你的代码,你在传递模型时遇到问题.我可以帮你弄清楚出了什么问题,所以你不需要ref用来完成这样的事情.