入力編集を切り替えるAurelia customAttribute

Question

customAttributeを作成するための最良の方法を理解するには、簡単に編集を切り替えることができます。ここでは私が探しているものです：だから基本的に私がしたい

<tr toggle-edit> 
    <td edit-hide>${model.name}</td> 
    <td edit-show><input type="text" value.bind="model.name"></td> 
    <td><button edit-trigger>Edit</button></td> 
</tr> 

customAttributeという名前edit-trigger属性を探して、真/偽、それは意志に応じて可変にtoogleうということにイベントリスナーを追加しますtoggleEditedit-hide/edit-showの要素を表示または非表示にします。

elementの中のDOMをトラバースしない方が、jQuerishのようにこれらの属性を見つけることができますが、これは実現可能ですか？

私は少なくとも10個の要素が編集ボタンを使用し、それぞれの変数を持っているので、if.bindは悪い考えのように思えるので、このようなcustomAttributeを持っていたいと思います。私はいつもclick.delegate="myShowVar = !myShowVar"を通してテンプレート自体の中で行うことができますが、HTMLの中にロジックを置くことが（角度のある背景から来る）悪い習慣であることがわかっている限り、

私はplunker/codepenを追加しますが、コンパイルとライブラリの依存関係のため、これは簡単な作業のようには見えません。

アイデアをお寄せいただきありがとうございます。

Answer 1

：

table.htmlここに要旨を実行している全

<td contenteditable.bind="editable"></td> 
<td><button click.delegate="editable = !editable"></td> 

：ここではどのようですそれからcustomElementを作成するのが最善でした。私が実行した問題は、customElementが実際にはテーブル要素として機能しないことです（他のフレームワークと同様）。これに対する魂は、as-element属性を使用することです。実際inputとdivの間で交換するので、if.bindを使用するよりも、よりよい解決策である私はcontenteditableを使用customElementの

Insideは、理由はもちろん、それらに特定のスタイルを適用することで一周することができたスタイルの違い（のジャンピング効果を発揮しますcontenteditableはすぐに使用できます）。

これは、多かれ少なかれ、私が作成したものを（parent.html）です：

<tr as-element="my-custom-row" 
    title="My first row" 
    is-editable="true" 
    model.two-way="myModel.name" 
    value-changed-callback.call="updateModel(myModel)"> 
</tr> 

そしてmy-custom-row.html内側：

<template> 
    <td>${title & oneTime}</td> 
    <td> 
     <div contenteditable.one-way="editingEnabled ? 'true' : 'false'" 
      blur.trigger="valueChanged(model)" 
      textcontent.two-way="model"> 
     </div> 
     <div class="my-class" class.one-way="editingEnabled ? 'my-class--active' : ''"></div> 
    </td> 
    <td> 
     <span class="edit-icon" 
      click.delegate="editingEnabled = !editingEnabled" 
      if.one-time="isEditable"> 
     </span> 
    </td> 
</template> 

私はeditingEnabledので、各編集のための変数を作成する必要はありません。この方法それぞれcustomElementに固有です。

は、I側の注意点として、私はそれがより明確であることを、それは何が起こっているかは明らかだから one-way/ two-way/ one-timeの代わり bindを使用する方が良いと思います。

私はまた、完全な答えのための対応JS（my-custom-row.js）を提供します：plunkrの提案を

import { bindable } from 'aurelia-framework'; 

export class MyCustomRow { 
    @bindable model; 
    @bindable title; 
    @bindable isEditable; 
    @bindable valueChangedCallback; 

    constructor() {} 

    valueChanged(modelValue) { 
     this.valueChangedCallback({ modelValue }) 
    } 
} 

Answer 2

は、私は自動的にあなたのためにこれを取り扱うカスタム属性を持ってしようとして反対をお勧めしますのcontentEditable属性

を使用してください。あなたはおそらくこのように解決するよりも多くの問題にぶつかるでしょう。代わりに、ビューモデルで編集可能なプロパティを作成してバインドすることをお勧めします。

contenteditable属性は、DIVなどのHTML要素の内容を編集できる標準のHTML属性で、Aureliaでそのまま使用できます。それがあなたのニーズを満たすなら、それを活用することをお勧めします。私<tr></tr>は、私はそれを決めた（トグル上のいくつかのアニメーションで）14行のコードであることが判明しているのでhttps://gist.run/?id=c4e716f21f4f9c15a9346cfacbdae74b