是否有可能讓Aurelia組件將值返回給其父母

Question

我正在使用Aurelia創建應用程序，並且在該應用程序的一部分中，我有一個列出用戶的網格，特別是用戶活動狀態。

爲了允許編輯活動狀態，我創建了一個幻燈片按鈕控件（類似於在iOS中看到的），其中向左滑動是正確的，而向右滑動是錯誤的。

我想要做的是在我的用戶網格中使用此控件，以便使用它的人只需單擊自定義幻燈片按鈕以啓用/禁用用戶，但我需要該控件來提供它的值當它變回行它被放置在

事情是這樣的：

想象我的表看起來像這樣

<table> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Is Active?</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr repeat.for="user of userList"> 
     <td>${user.id}</td> 
     <td>${user.name}</td> 
     <td>${user.email}</td> 
     <td><slidebutton active="${user.active}"></slidebutton></td> 
    </tr> 
    </tbody> 
</table> 

這工作這麼多偉大的滑動按鈕被設置爲基於用戶的活動狀態的默認值爲預計。

但是，當更改幻燈片按鈕時，我希望通知某行，以便我可以告訴它更新後端並更改狀態。

我不反對在用戶ID傳遞給自定義組件EG：

<td><slidebutton active="${user.active}" uid="${user.id}"></slidebutton></td> 

但我寧願沒有控制撥打電話，或者是做任何事情，使我不能用它在其他地方，例如可能具有不同項目的可切換信息的其他網格上。

我想到了一個基於事件的方法，然後我查看了其中一個用戶表，發現有500多行的表格可能存在，並且從500張幻燈片中跟蹤/管理500個事件按鈕似乎並不是我特別想做的事情。

如果有一種方法可以將值反映回屬性，那麼我認爲這將是一個很好的開始，但是如果可能，我實際上會喜歡自定義控件直接更改基礎視圖如果可能的話，在行上模型。

Answer 1

您可以輕鬆設置雙向數據綁定。首先，您應該切換到使用.bind語法，而不是使用字符串插值來傳入值。這是因爲使用字符串插值會將您的值轉換爲字符串，而.bind語法可以保留您傳入的任何類型它也適用於綁定對象等。

<td><slidebutton active.bind="user.active" uid.bind="user.id"></slidebutton></td> 

我們可以在上面的示例代碼更改.bind到.two-way，這將告訴奧裏利亞這些綁定必須是雙向的。這將完成你想要的，但它是討厭總要做到這一點：

<td><slidebutton active.two-way="user.active" uid.bind="user.id"></slidebutton></td> 

請注意，我只設置active屬性爲雙向數據綁定，因爲我猜uid財產ISN在slidebutton控件中不會改變，因此不需要對其執行雙向數據綁定。

但我們可以將其設置爲默認雙向數據綁定。讓我們看看如何做到這一點。我確定您已在slidebutton自定義元素中爲active和uid創建了可綁定屬性。我敢打賭，他們看起來像這樣（在ESNext）：

@bindable active; 
@bindable uid; 

如果我們增加一點配置的這些，我們就可以設置這些屬性默認爲雙向綁定，然後你會得到您默認尋找的雙向數據綁定。

@bindable({ defaultBindingMode: bindingMode.twoWay }) active; 
@bindable uid; 

請注意，我上面使用的是bindingMode.twoWay。您需要從aurelia-framework模塊導入此枚舉。因此，你可能有類似下面的一行在slidebutton的視圖模型文件的頂部：

import {bindable, bindingMode} from 'aurelia-framework'; 

一旦你做到了這一點，你可以回去使用active.bind="user.active"和Aurelia大街將處理的兩方式數據綁定爲您。