Aurelia自定義元素中的雙向數據綁定 - 將自定義元素綁定到父視圖模型

Question

在我的應用程序中，我製作了很多「服務」，我可以在我的viewmodels中注入以節省som冗餘和時間。

現在我期待進一步，並使這些表單元素（選擇，文本，複選框 - 選擇下拉菜單），並將它們轉換爲自定義元素，只在自定義元素注入服務。

我可以在某種程度上得到它的工作。自定義元素（在這種情況下選擇）顯示，當我在「父」視圖中需要它時，但是當我更改自定義選擇元素的選定值時，它不綁定到「父」視圖模型，這是我的要求。

我想通過它的模板中的綁定屬性，將自定義元素的選定值綁定到「父」視圖模型上的屬性。

我會在幾分鐘內更新哪些小代碼片段。

create.js（我稱之爲父視圖模型）

import {bindable} from 'aurelia-framework'; 
export class Create{ 
    heading = 'Create'; 
    @bindable myCustomElementValue = 'initial value'; 
} 

create.html上（父視圖）

<template> 
    <require from="shared/my-custom-element"></require> 
    <my-custom selectedValue.bind="myCustomElementValue"></my-custom> 
    <p>The output of ${myCustomElementValue} should ideally be shown and changed here, as the select dropdown changes</p> 
</template> 

我-custom.js

import { inject, bindable} from 'aurelia-framework'; 
import MyService from 'my-service'; 

@inject(MyService) 
export class MyCustomCustomElement { 
    @bindable selectedValue; 

    constructor(myService) { 
     this.myService = myService ; 
    } 

    selectedValueChanged(value) { 
     alert(value); 
     this.selectedValue = value; 
    } 

    async attached() { 
     this.allSelectableValues = await this.myService.getAllValues(); 
    } 
} 

什麼發生的最初是create.html視圖輸出「初始值」，並且當我改變自定義元素select的值時，新選擇的值e被警告，但它不會更新綁定的父變量，它仍然只顯示「初始值」。

Answer 1

有幾個問題在這裏：

1. 您需要烤肉情況在DOM由於不區分大小寫

   selected-value.bind="property"

   不

   任何屬性名稱

   selectedValue.bind="property"

2. 您需要綁定雙向。使用裝飾器創建@bindable時，其中一個參數是BindingMode，您可以使用它來設置默認綁定模式。

   Aurelia設置了一些合理的默認設置，例如，爲input value.bind=".."默認是沒有被明確的雙向

   如果你不想設置默認綁定模式，你可以只是明確你的綁定：

   selected-value.two-way="prop"

希望這幫助:)

編輯：我覺得API在這個答案後有所改變。

的@bindable裝飾具有以下簽名：

bindable({ 
    name:'myProperty', 
    attribute:'my-property', 
    changeHandler:'myPropertyChanged', 
    defaultBindingMode: bindingMode.oneWay, 
    defaultValue: undefined 
}) 

一個檢查快速參考最好的地方是奧裏利亞作弊表在docs：

http://aurelia.io/docs/fundamentals/cheat-sheet