Aurelia customAttribute切換輸入編輯

我需要一些幫助來找出創建customAttribute的最佳方法，這將允許輕鬆編輯切換。以下是我在尋找：Aurelia 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屬性和事件偵聽器添加到它會的toogle變量真/假，並根據它會顯示或隱藏具有edit-hide/edit-show的元素。

我寧願不穿過element裏面的DOM找到這些屬性，因爲它感覺jQuerish，這是可以實現的嗎？

我想擁有一個像這樣的customAttribute，因爲我至少有10個元素將使用編輯按鈕併爲每個元素設置一個變量，然後使用if.bind似乎是一個糟糕的主意。我始終可以通過click.delegate="myShowVar = !myShowVar"來完成模板本身的內部操作，但據我所知，在html內部放置邏輯是一種不好的做法（來自角度背景）。

我會添加一個plunker/codepen，但由於整個編譯和庫依賴關係，這似乎不是一件容易的事情。

非常感謝您的任何想法。

來源

2016-10-02 Baki

感謝在plunkr建議。 –

由於我<tr></tr>竟然是一個14行代碼（與切換一些動畫），我決定最好是從中創建一個customElement。我遇到的問題是customElement s不能作爲表格元素（與其他框架類似）。精心設計的是使用as-element屬性。

裏面的customElement我以前contenteditable這實際上是比使用if.bind因爲input和div之間交換一個更好的解決方案產生，因爲在樣式（區別這當然可以通過應用某種風格對他們進行繞行的跳躍效應但是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都是獨一無二的。

正如我側面說明，我認爲這是更好更明確，使用one-way/two-way/one-time，而不是bind因爲它清楚發生了什麼。

我也會爲一個完整的答案（my-custom-row.js）提供相應的JS：

import { bindable } from 'aurelia-framework'; 

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

    constructor() {} 

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

來源

2016-10-08 08:17:57 Baki

使用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

來源

2016-10-03 01:08:45

感謝您的回覆。 'contenteditable'類似於if.bind，因爲我需要爲每個'td'都有一個變量，這正是我想要避免的。也許這只是在html內部創建它並不壞，如果我沒有找到更好的解決方案，我可能會解決這個問題。順便說一句。我喜歡迄今爲止的aurelia體驗=） – Baki

使用'if.bind'來顯示/隱藏可編輯和靜態元素也是一個很好的解決方案，並且也遵循這個基本結構。 –

我已經對contenteditable進行了解決，並決定創建一個customElement。問題在於customElements在表格[link]（https://github.com/aurelia/binding/issues/112）中並不真正起作用。只要我處理上述問題，我會盡快回復這個問題，並提供最終結果。 – Baki

Aurelia customAttribute切換輸入編輯

回答

相關問題