Как я могу получить значение, которое находится внутри тега HTML и связать его с TS (файл компонента) в Aurelia

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>

1. привязка к innerhtml без санитарии это дегенеративно.
2. дополнительный и дополнительный код.
3. имея представление о DOM внутри VM противоречит MVVM парадигма.

Answer 2

Я рекомендую рассмотреть возможность использования пользовательских атрибутов или манипулирования с использованием ref - но все же это может быть плохой практикой (JQuery/Angular) манипулирования DOM напрямую.

1. Делайте манипуляции с DOM в bind(), attach () или в других методах жизненного цикла компонента, не делайте этого в конструкторе.
2. использование ref атрибут для доступа к элементу в классе VM.
3. использовать например 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, обратите внимание, что ManagedContent() добавляет некоторый контент в ваш компонент:

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

Поиграйте с GistRun по адресу https://gist.run/?id=b712431087519a20d1a29c88906b7fe9

Answer 3

Этот ответ не верен, хотя он работает. Смотрите принятый ответ для лучшей интеграции и объяснения.

Я никогда раньше не работал с aurelia, но, глядя на документацию, это должно сработать:

Шаблон:

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