フォーム内の数字を使って作業する

Question

私はAureliaを使ってアプリケーションを構築していますが、これまでのフレームワークは本当に好きですが、値が数値のチェックボックスのリストを表示しようとしているところで問題が発生しました。実際には）、Aureliaはそれらを文字列に変換するように見えるため、比較は失敗します。

export class MyVm { 
    constructor() { 
     this.items = [ 
      {name: 'Foo', id: 0}, 
      {name: 'Bar', id: 1}, 
      {name: 'Baz', id: 2} 
     ]; 
     this.selectedItems = [0, 2]; 
    } 
} 

そして、私の見解では：このため

<ul> 
    <li repeat.for="item of items"> 
     <input type="checkbox" value.bind="item.id" checked.bind="selectedItems"> 
     ${item.name} 
    </li> 
</ul> 

私は実際にちょうど他の比較の問題の束でにつながるthis.selectedItems = ["0", "2"]をしなければならない作業する

は、私は基本的に何かのように持っています私自身のコード。また、データを保存するときに、選択した項目を後でサーバーに文字列として送信したくない場合もあります。

私はのtoString toViewとのparseInt fromViewを変換し、単純な値コンバータを使用してみましたが、私はselectedItemsの配列にこのコンバーターを実行することはできません。

export class IntValueConverter { 
    toView (val) { 
     return val.toString(); 
    } 

    fromView (val) { 
     return parseInt(val); 
    } 
} 

はどのようにあなたはこれを解決するに行きますか？

Answer 1

あなたはほとんどそれを持っています。

<input type="checkbox" value="${item.id}" checked.bind="selectedItems"> 

<input>要素のvalue属性は、それが文字列に割り当てられているすべてのものを強制的に変換：この部分での一つの小さな問題があります。それだけでなく、文字列補間バインディング（例：${...}）もすべてを文字列に変換します。数値アイテムのIDを保持する必要があります。 value="${item.id}"をmodel.bind="item.id"に置き換えると正常に動作します。コンバータは不要です。

と同時に、チェックボックス、ラジオ、およびアウレア結合レポに結合する選択的な文書のセット。彼らは公式のAureliaドキュメントアプリにまだ公開されていませんが、火曜日にそこにいるはずです。

また、idが0のアイテムで変わったことがある場合は、火曜日にも同様にa fixが出ています。

https://gist.run/?id=d9d8dd9df7be2dd2f59077bad3bfb399