kế thừa - Làm thế nào để "kế thừa" các thuộc tính có thể ràng buộc trong Aurelia?

Tôi đang phát triển một ứng dụng Aurelia sử dụng TypeScript. Trong ứng dụng này, tôi đã định nghĩa một tập hợp các phần tử tùy chỉnh, mỗi phần tử chia sẻ một tập hợp các thuộc tính có thể liên kết được, những thuộc tính này được chuyển đổi thành các cài đặt CSS như được minh họa trong ví dụ đơn giản sau:

import {computedFrom, bindable, autoinject} from 'aurelia-framework';

@autoinject
export class MyCustomElement {
    @bindable span: number;

    @computedFrom('span')
    get width() {
        return this.span? this.span* 26 : 0;
    }

    // Leaving out a whole bunch of other code for sake of readability
}

Mã HTML cho phần tử này trông gần giống như sau:

<template>
    <div css="width: ${width}px;">
        <svg xmlns="http://www.w3.org/2000/svg" css="width: ${width}px;">
        </svg>
    </div>
</template>

Vì vậy, tôi cần giá trị của thuộc tính tính toán nhiều lần trong suốt mẫu HTML của phần tử tùy chỉnh.

Bây giờ các phần tử khác cũng cần thuộc tính span và width. Như tôi hiểu từ việc đọc github: Vấn đề Aurelia #210 là kế thừa các thuộc tính bindable vẫn chưa được hỗ trợ. Như Rob Eisenberg đã phát biểu, cách nên làm là sử dụng composition ở đây. Nhưng khi sử dụng cách đó, tôi vẫn sẽ cần phải triển khai cả thuộc tính span và width đồng thời cũng phải nhập một component thông qua dependency injection chỉ để thêm chức năng thực sự tính toán lề trái. Vậy nên tổng thể, cách tiếp cận này vẫn dẫn đến việc phải sao chép và dán rất nhiều mã.

Có cách nào tốt hơn để giải quyết việc này không?

Tôi đã suy nghĩ về việc sử dụng các thuộc tính tùy chỉnh cho việc này sau một gợi ý từ @AureliaEffect trên Twitter, nhưng điều đó vẫn sẽ không ngăn tôi thực hiện từng thuộc tính cần thiết trên phần tử để có thể liên kết với nó trong mẫu của phần tử.

Một giải thích ngắn gọn về lý do kinh doanh đằng sau điều này (hay còn gọi là "Tại sao tôi chọn cách tiếp cận này"): Người dùng ứng dụng của tôi có thể xây dựng một sơ đồ đường ray giống như trong các hệ thống khóa đường sắt điện tử. Điều này yêu cầu phải xác định chiều rộng của các phần tử hoặc độ lệch của chúng theo một số đơn vị chung, không phải theo pixel. Ngoài ra, các thuộc tính này cần được xác định cho từng phần tử chứ không phải cho từng lớp phần tử.

(Có một câu hỏi khác trên StackOverflow liên quan đến một chủ đề khá tương tự, nhưng với một phương pháp không hoạt động trong trường hợp của tôi: Sử dụng thuộc tính @bindable trên lớp con trong Aurelia)

Câu trả lời #1

Có thể bạn đã thấy điều đó từ câu hỏi đó, nhưng hiện tại đang có một cuộc thảo luận sôi nổi về vấn đề này trên GitHub và cuối cùng sẽ có một PR được gửi lên sớm. Bạn có thể theo dõi cuộc thảo luận ngay tại đây: https://github.com/aurelia/templating/pull/507#issuecomment-297163265