Hai chiều ràng buộc giữa phụ huynh và trẻ em tùy chỉnh yếu tố trong Aurelia

Question

Tôi nghĩ rằng tôi đã cố gắng để làm một cái gì đó rất đơn giản nhưng tôi chỉ không thể thực hiện công việc này. Toàn bộ ví dụ này là trên plunkr

Tôi có thành phần tùy chỉnh rất cơ bản trình bày một thành viên dữ liệu @bindable mà nó hiển thị và giám sát với sự kiện đã thay đổi. Nó trông như thế này:

import {bindable} from "aurelia-framework"; 
export class ChildElementCustomElement { 
    @bindable childData; 
    childDataChanged(value) { 
    alert("Child Data changed " + value); 
    } 
} 

và quan điểm:

<template> 
    <div style="border: solid 1pt green;"> 
    <h2>This is the child</h2> 
    This is the child data : ${childData} 
    </div> 
</template> 

Phụ huynh cho thấy phần tử con nhưng tôi muốn có một thành viên trong mô hình quan điểm của mình đó là ràng buộc với đứa trẻ vì vậy bất kỳ sự thay đổi trong các thành viên mẹ được tự động phản ánh trong đứa trẻ. Dưới đây là đoạn code mẹ:

import {bindable} from "aurelia-framework"; 
export class App { 
    parentData = "this is parent data"; 
} 

và quan điểm:

<template> 
    <h1>Two-way binding between parent and child custom elements</h1> 
    <require from="./child-element"></require> 
    <child-element childData.bind="parentData"></child-element> 
    <hr/> 
    <label>The following is the parent data:</label> 
    <input type="text" value.bind="parentData"></input> 
</template> 

Những gì tôi muốn thấy là bất kỳ bản cập nhật đã gõ trong lĩnh vực đầu vào sẽ tự động xuất hiện ở trẻ em (cộng với sự kiện cháy thay đổi) nhưng đứa trẻ không bị ràng buộc chút nào! Tôi cũng đã cố gắng trao đổi bind cho two-way chỉ trong trường hợp quy ước đã ràng buộc one-way nhưng điều đó vẫn chưa hoạt động.

Hãy làm nổi bật ngu ngốc của tôi :) vì hiện tại tôi đang nghĩ rằng điều này chỉ hoạt động.

Answer 1

Quy ước mặc định cho @bindable là chuyển tên thuộc tính được gắn camel thành tên thuộc tính sử dụng quy ước đặt tên 'myProperty' -> 'my-property' (dấu gạch ngang).

Từ documentation:

@bindable({ 
    name:'myProperty', //name of the property on the class 
    attribute:'my-property', //name of the attribute in HTML 
    changeHandler:'myPropertyChanged', //name of the method to invoke when the property changes 
    defaultBindingMode: bindingMode.oneWay, //default binding mode used with the .bind command 
    defaultValue: undefined //default value of the property, if not bound or set in HTML 
}) 

Các giá trị mặc định và công ước được trình bày ở trên. Vì vậy, bạn chỉ cần để chỉ định các tùy chọn này nếu bạn cần phải đi chệch.

Vì vậy, bạn cần phải viết child-data.bind trong HTML của bạn

<child-element child-data.bind="parentData"></child-element> 

Plunkr