Aurelia: Ràng buộc với các giá trị được tính

Question

Trong ứng dụng của tôi, tôi cần phải có một số biểu mẫu với các hàng giá trị phải được tổng kết. Tôi cần phải lặp qua các hàng này, có đầu vào cho chúng và sau đó xây dựng một số tiền cần được cập nhật khi các đầu vào được chỉnh sửa.

Đây là một ví dụ đơn giản: Lớp:

export class example { 
    items = [ 
     { id: 1, val: 100 }, 
     { id: 2, val: 200 }, 
     { id: 3, val: 400 } 
    ]; 

    get sum() { 
     let sum = 0; 
     for (let item of this.items) { 
      sum = sum + parseFloat(item.val); 
     } 
     return sum; 
    } 
} 

Quan điểm:

<div repeat.for="item of items" class="form-group"> 
    <label>Item ${$index}</label> 
    <input type="text" value.bind="item.val" class="form-control" style="width: 250px;"> 
</div> 
<div class="form-group"> 
    <label>Summe</label> 
    <input type="text" disabled value.one-way="sum" class="form-control" style="width: 250px;" /> 
</div> 

Đến đây mọi thứ đang làm việc như tôi mong đợi nó để làm. Nhưng: đó là kiểm tra bẩn trên sum tất cả thời gian và tôi sợ chạy vào các vấn đề hiệu suất trong các ứng dụng phức tạp hơn. Vì vậy, tôi cố gắng sử dụng @computedFrom trang trí, nhưng không ai trong số các phiên bản này hoạt động:

@computedFrom('items') 

@computedFrom('items[0]', 'items[1]', 'items[3]') 

@computedFrom('items[0].val', 'items[1].val', 'items[3].val') 

Trong tất cả những trường hợp này, tổng chỉ được tính một lần nhưng không sau khi chỉnh sửa các giá trị. Và cuối cùng 2 sẽ không có giải pháp tốt, bởi vì tôi có thể có một số lượng thay đổi của các mặt hàng trong mô hình của tôi.

Bất kỳ đề xuất nào về cách tôi có thể nhận được giá trị được tính toán được thay đổi khi các trường phụ thuộc vào thay đổi mà không có kiểm tra bẩn?

Answer 1

sử dụng @computedFrom vào mục val prop:

import {computedFrom} from 'aurelia-framework'; 

export class Item { 
    constructor(id, val, parent) { 
    this.id = id; 
    this._val = val; 
    this.parent = parent; 
    } 

    @computedFrom('_val') 
    get val() { 
    return this._val; 
    } 
    set val(newValue) { 
    this._val = newValue; 
    this.parent.calculateSum(); 
    } 
} 

export class Example { 
    sum = 0; 

    items = [ 
    new Item(1, 100, this), 
    new Item(2, 200, this), 
    new Item(3, 400, this) 
    ]; 

    constructor() { 
    this.calculateSum(); 
    } 

    calculateSum() { 
    let sum = 0; 
    for (let item of this.items) { 
     sum = sum + parseFloat(item.val); 
    } 
    this.sum = sum; 
    } 
} 

Đối với một số ý tưởng khác, hãy nhìn vào https://stackoverflow.com/a/32019971/725866