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名称toggleEdit,它将查找edit-trigger属性并向其添加一个事件监听器,它将使变量真/假,并根据它将显示或隐藏具有edit-hide/ 的元素edit-show.

我宁愿不去DOM内部element找到这些属性,因为它感觉jQuerish,这是可以实现的吗？

我希望有一个像这样的customAttribute,因为我至少有10个元素将使用一个编辑按钮并为每个元素都有一个变量然后使用if.bind似乎是一个坏主意.我总是可以在模板内部进行,click.delegate="myShowVar = !myShowVar"但据我所知,在html中放置逻辑是一种不好的做法(来自角度背景).

我会添加一个plunker/codepen,但由于整个编译和库依赖,这似乎不是一件容易的事.

非常感谢任何想法.

Answer 1

使用contenteditable属性

我建议您不要试图让自动处理此属性的自定义属性.你可能遇到的问题多于你用这种方式解决的问题.相反,我建议您在视图模型中创建可编辑属性并绑定到它.

contenteditable属性是一个标准的HTML属性,允许编辑HTML元素的内容,例如DIV,并且Aurelia支持开箱即用.如果能满足您的需求,我建议您利用它.这是如何做:

table.html

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

完整的运行要点:https://gist.run/？ id = c4e716f21f4f9c15a9346cfacbdae74b