ビュー内の配列の要素を結合する

Question

私はaureliaフレームワークが初めてです。私はインライン編集でテキスト入力のリストを作成しようとしています。すべての入力はデフォルトで無効にする必要があります。編集ボタンをクリックすると、disbaled属性を削除して編集できるようになります。

マイwelcome.js：

import {inject} from 'aurelia-framework'; 

@inject(HttpClient) 
export class Welcome { 
    heading = 'Welcome'; 

    inputs_list = [ 
     { 
      'id': 1, 
      'text': 'example one', 
      'edit': false 
     }, 
     { 
      'id': 2, 
      'text': 'example two', 
      'edit': false 
     }, 
    ]; 

    editInput(evt){ 
     let input = this.inputs_list.find(input => input.id === id); 
     input.edit = true; 
    } 

} 

マイビューファイルのwelcome.html：

<template> 
    ${heading} 
    <ul> 
     <li repeat.for="input of inputs_list"> 
      <input ${input.edit ? '' : 'disabled'} type="text" value="${input.text}" class="inputs"/> 
      <input type="button" click.delegate="editInput(input.id)" value="edit" /> 
     </li> 
    </ul> 
</template> 

そして、私は警告し取得しています：

WARN [templating-binding] Unknown binding command. Object {defaultBindingMode: null, attrName: "${input", attrValue: "", command: "edit", expression: null} 

私はすでに解決策を発見しましたeditInputメソッドを変更し、$eventをパラメータとして渡します：

editInput(evt){ 
    let inputs = evt.target.parentNode.getElementsByClassName('inputs'); 
    Array.from(inputs).forEach(input => input.removeAttribute('disabled')); 

} 

これは機能しますが、これを達成するための適切な方法は何ですか？

Answer 1

アウレリアは、inputという要素には、${input.edit ? '' : 'disabled'}という属性がありません。バインドされた属性にバインドするには、バインディングコマンドを使用する必要があります。

Aureliaのバインディングエンジンを使用する方法については、いくつかのスタートガイドを読むのに役立つかもしれません。例えば、value="${input.text}"はおそらくあなたがしたいことをしていません。 input.textプロパティをそのテキストボックスの値にバインドするには、value.bind="input.text"を使用する必要があります。

また、clickハンドラでは、idを渡すのではなく、配列から項目を渡すことができます。 click.delegate="editInput(input)"を入力し、editInput関数でinput.editプロパティをtrueに設定します。あるいは、私は以下のように、あなたのビューでこれをインラインで行えます。

最後に、inputs_listは、標準のJavaScript命名規則に従いません。あなたは、私が以下に示されているようinputsListまたはinputListへの切り替えを検討する必要があります。

ここでは例です：https://gist.run?id=69bfe207db225125237878ebd7caccd8

app.html

<template> 
    ${heading} 
    <ul> 
     <li repeat.for="input of inputList"> 
      <input disabled.bind="!input.edit" type="text" value.bind="input.text" class="inputs"/> 
      <input type="button" click.delegate="input.edit = true" value="edit" /> 
     </li> 
    </ul> 
</template> 

app.js

は、

import {inject} from 'aurelia-framework'; 

export class Welcome { 
    heading = 'Welcome'; 

    inputList = [ 
     { 
      'id': 1, 
      'text': 'example one', 
      'edit': false 
     }, 
     { 
      'id': 2, 
      'text': 'example two', 
      'edit': false 
     }, 
    ]; 

} 

Answer 2

あなたはこのような属性に値を直接バインドすることができます。

<input disabled.bind="input.edit" type="text" value="${input.text}" class="inputs"/> 

を使用すると、DOMをいじる必要はありません。この方法では、この記事をチェックアウト

直接属性で照会したりいじくりmore information