Question

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

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

这只是以编程方式设置ref值的简单示例。请注意＆＃34;我输入的值是＆＃34;留下来＆＃34;你好＆＃34;但输入字段更改为＆＃34;值已更改!!!!＆＃34;当你按下按钮时。

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

有几点需要注意： 1）我们想使用Aurelia＆＃34; ref＆＃34;而不是＆＃34; id＆＃34;或＆＃34;名称＆＃34;。 2）我们试图通过模型而不是＆＃34; ref＆＃34;。我们可以成功获得模型的价值并将其放入笔记编辑器中，但是当我们传回模型时模型不会更新。

更新：

我们有答案（谢谢！）。这是我们试图传递模型的代码（因此我们甚至不需要使用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;
    }

最后一个功能＆＃34; CloseNote＆＃34;是一个不起作用的人。该模型（我们认为指向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中添加一个属性，其中包含您在{{1}中使用的名称}属性。所以上面的例子可以使用ref而不是传入的对象来完成，因为它们是相同的。

以下是一个工作示例：https://gist.run/?id=7f96df1217ac2104de1b8595c4ae0447

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

Aurelia：以编程方式更改参考值并不会更改模型

1 个答案: