-1

から印刷しました。私の値はアラートで印刷されていましたが、この値をDOMでどのように印刷できますか？ h1タグのように？aurelia.js私のDOMの値をセレクト

app.html：

<template> 

    <select value.bind="changedValue" change.delegate="DropdownChanged(changedValue)"> 
    <option model.bind="1">1</option> 
    <option model.bind="2">2</option> 
    <option model.bind="3">3</option> 
    <option model.bind="4">4</option> 
    </select> 

</template>

app.js

export class App { 
    changedValue; 


    DropdownChanged(changedVal) { 
    alert(changedVal); 
    } 

}

https://gist.run/?id=87f6897928feb504dad638d439caf92f

出典

2017-11-14 Raduken

あなたのテンプレートで '

$ {changedValue}

'とあなたの変更関数の委譲で 'this.changedValue = changedVal' –

変更ハンドラは完全に不要です。それが、Aureliaのデータバインディングシステムがあなたにもたらすものです。変更ハンドラを取り除き、ドロップダウンの値にバインドされているプロパティに直接バインドしてください。 https://gist.run/?id=f5d953abebb7f323d88b05e80cb04b00 –

値が変更されたときにコードを実行する必要がある場合は、単に関数を呼び出すことができますが、その中にプロパティ値を設定する必要はありません。 https://gist.run/?id=8e5f28a2f88d6c248880aafe3ef0df95 –

アプリでchangedValueは、私はそれを見るようにあなたが選択したモデルを保持しています。

あなたは異なった値ではなく警告を選択したときにそれを更新し

export class App { 
    value = 1;

それをデフォルト（そしておそらくより良い名前）を与える必要があります。示唆したように

DropdownChanged(changedVal) { 
    this.value = changedVal; 
}

次に、あなたが自由に自分のテンプレート

<template> 
    <h1>${value}</h1> 
...

でそれを使用することができ、あなたはあなただけの選択モデルにバインドすることができ、その場合には、まったく変更インターセプターを必要としない場合があります。

<select value.bind="selectedValue">

と

<h1>Selected Value: ${selectedValue}</h1>

（この特定の簡略化された例では、任意のjsコードの必要はありません）

出典

2017-11-14 12:12:39

上記の2つの要点を見て、あなたの答えを更新することをお勧めします： –

意味がありますが、私はOPの使用について何も仮定したくありませんでした他の何かのために変更を傍受する必要があったかもしれません。 –

aurelia.js私のDOMの値をセレクト

$ {changedValue}

答えて

関連する問題