如何获取 HTML 标签内的值并将其绑定到 aurelia 中的 ts（组件文件）答案

【问题标题】：How can i get the value which is inside the HTML tag and bind it to the ts(component file) in aurelia如何获取 HTML 标签内的值并将其绑定到 aurelia 中的 ts（组件文件）
【发布时间】：2019-01-18 17:26:42
【问题描述】：

我想操作段落内的文本，并将它的上下文传递给我可以操作它的组件。基本上我想这样做：

HTML 文件

<p bind="text"> Some text here </p>

打字稿文件

export class Example{
  @bindable text;
  constructor() 
  {
    this.Function()
  }

    Function() {
     console.log(text) 
     //Here i want to be printed out Some text here
    }
}

我不介意答案是用 jQuery 还是 JavaScript 编写。

【问题讨论】：

恐怕您需要分享更多信息。你的组件是什么样的？该段落是否可用于该组件？是否愿意直接用 DOM 进行操作等
@DawidZbiński 我编辑了它，希望我说得更清楚。我想知道是否可以绑定段落
中的文本，在这种情况下“这里有一些文本”，我希望它绑定在变量文本上。然后当 Function() 被调用时（在这种情况下是在构造函数中），它将在控制台中打印出 Some text here。我说清楚了吗，你明白这个问题吗？
- 不要在构造函数中调用任何 Function()。在 attach() 或 bind() 中调用。 - 在构造函数中 - 内容可能无法访问 - this.text = ?未定义。

标签： javascript jquery typescript aurelia

【解决方案1】：

接受的答案确实不是要走的路。你应该这样做：

<template>
    <p>${text}</p>
</template>

绑定到innerhtml 而不进行清理是危险的。
额外且不必要的代码。
在VM 中包含DOM 的概念与MVVM 范式相矛盾。

【讨论】：

【解决方案2】：

这个答案不正确，即使它有效。请参阅接受的答案以获得更好的集成和解释。

我以前从未与 aurelia 合作过，但看看 the documentation，这应该可以解决问题：

模板：

<template>
    <p ref="myParagraph" innerhtml.bind="text"></p>
</template>

组件：

export class ExampleComponent {
    text = 'Example text';

    constructor() {
        this.exampleFunction();
    } 

    exampleFunction () {
        console.log(text);
        // text should be here
    }
}

如果您需要先读取文本（它已经设置在其他位置，而不是在组件中），您可能需要读取构造函数中的值。

constructor() {
    this.text = this.myParagraph.innerHTML;
}

【讨论】：

- 不要在构造函数中调用 exampleFunction()。在 attach() 或 bind() 中调用。 - 在构造函数中 - 内容可能无法访问 - this.text = ?未定义。

【解决方案3】：

我建议考虑使用自定义属性，或使用ref 进行操作 - 但直接操作 DOM 仍然可能是不好的做法（JQuery/Angular 方式）。

在bind()、attached() 或组件生命周期的其他方法中操作DOM，不要在构造函数中操作。
使用ref 属性访问VM 类中的元素。
使用例如MybindCustomAttribute 定义自定义属性mybind 并将其写入mybind.js 文件。然后属性的内容可以通过valueChanged() 方法实现。不要使用 bind 作为属性名称 - 因为它可能会造成混淆。

app.html:

<template>
  <require from='./mybind'></require>
  <p ref="myparagraph" mybind="Add other text. ">Some text here. </p>
</template>

app.js，请注意，operatedContent() 在您的组件中添加了一些内容：

export class App {
  constructor() { }
  attached() {
    this.mytext = this.myparagraph.innerHTML;
    this.manipulatecontent();
  }
  manipulatecontent() {
    this.mytext += 'Hello world.';
    this.myparagraph.innerHTML=this.mytext
  }
}

mybind.js，根据 Aurelia 约定具有自定义属性类。在 valueChanged() 方法中访问属性的值：

export class MybindCustomAttribute {
      static inject = [Element];

      constructor(element){
        this.element = element;
      }

      valueChanged(newValue, oldValue){
        this.element.innerHTML += newValue;
      }
}

在https://gist.run/?id=b712431087519a20d1a29c88906b7fe9 使用 GistRun 进行操作

【讨论】：