Question

我想操纵段落中的文本，并将其上下文传递到可以操纵它的组件。基本上我想这样做：

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编写。

Answer 1

接受的答案确实是不的方法。您应该这样做：

不经过消毒就绑定到<template> <p>${text}</p> </template>上是很麻烦的。
多余和不必要的代码。
在innerhtml内部具有DOM的概念与VM范式是矛盾的。

Answer 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;
}

Answer 3

我建议考虑使用自定义属性，或使用select agent_id, max(id_allocation) keep (dense_rank last order by allocation_start) as id_current_allocation from v_agent_allocation group by agent_id order by agent_id;进行操作-但是直接操作DOM仍然是不好的做法（JQuery / Angular方式）。

不要在bind（），attach（（）或组件生命周期的其他方法中对DOM进行操作，而不要在构造函数中进行。
使用ref属性访问VM类中的元素。
使用例如ref定义自定义属性MybindCustomAttribute并将其写入mybind文件中。然后，可以通过mybind.js方法获得属性的内容。请勿使用valueChanged()作为属性名称-否则可能会造成混淆。

app.html：

bind

app.js，请注意，操纵内容（）在组件中添加了一些内容：

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

mybind.js，根据Aurelia约定具有自定义属性类。您可以通过valueChanged（）方法访问属性的值：

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

在https://gist.run/?id=b712431087519a20d1a29c88906b7fe9用GistRun对其进行修饰

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

HTML文件

打字稿文件

3 个答案: