Aurelia class.bind with checked.bindの問題

Question

class.bindをchecked.bindに依存するように使用しようとしています。

私の使用例はかなりシンプルです。私はtableを使って表示された項目のリストを持っています。この表の各行はcheckboxです。対応するcheckbox（行の）がチェックされているときはいつでも、行を「選択済み」としてマークしたいと思います。このため 私は、結合後に使用しています

<table class="table table-striped table-hover table-responsive"> 
    <tbody> 
     <tr repeat.for="item of items" class.bind="$parent.selectedItems.indexOf(item)>-1?'info':''"> 
     <td> 
      <input type="checkbox" checked.bind="$parent.selectedItems" model.bind="item" /> 
     </td> 
     <td>${item.id}</td> 
     <td>${item.name}</td> 
     </tr> 
    </tbody> 
</table> 

しかし、意図したのと同じ動作しない、これはthis plunkで見ることができます。次のように私は、@computedFrom('selectedItems', 'items')および/またはdeclarePropertyDependencies(App, 'classes', ['selectedItems', 'items']);とgetterを使用し、回避策として

：

import {computedFrom, declarePropertyDependencies} from "aurelia-framework"; 

export class App { 
    ... 

    @computedFrom('selectedItems', 'items') 
    get classes() { 
     const self = this; 
     const retval= self.items.map((item: any) => { 
      return self.selectedItems.indexOf(item) > -1 ? "info" : ""; 
     }); 

     return retval; 
    } 
} 

//declarePropertyDependencies(App, 'classes', ['selectedItems', 'items']); 

しかし、これはあまりにもこのworkaround plunkでここに見られるように動作しません。

@computedFromおよび/またはdeclarePropertyDependenciesのいずれも使用されておらず、明らかにダーティチェックが必要な場合にのみ動作します。

これを行うにはきれいな方法がありますか？

Answer 1

バインディングシステムは、式で使用されるプロパティが変更されると、いつでもクラスバインディング式class.bind="$parent.selectedItems.indexOf(item)>-1?'info':''"を再評価します。 selectedItemsプロパティは変更されず、同じ配列インスタンスのままです。当然ながら、配列のインスタンスが変異しているため、これは少し混乱します。次のような回避策があります：selectedItems.lengthをバインディング式に追加...配列からアイテムがプッシュ/ポップされたときに変更されることはわかっています。

はここに例を示しますhttps://gist.run?id=09d32941842352ff0025

app.html

<template> 
    <p>${message}</p> 
    <table class="table table-striped table-hover table-responsive"> 
    <tbody> 
     <tr repeat.for="item of items" class.bind="selectedItems.length === 0 || selectedItems.indexOf(item) === -1 ? '' : 'info'"> 
     <td> 
      <input type="checkbox" checked.bind="selectedItems" model.bind="item" /> 
     </td> 
     <td>${item.id}</td> 
     <td>${item.name}</td> 
     </tr> 
    </tbody> 
    </table> 
    ${selectedItems.length} items selected 
</template> 

app.js

export class App { 
    constructor(router) { 
    this.message = "Hello World!"; 
    this.items = [{ 
     id: 1, 
     name: "A" 
    }, { 
     id: 2, 
     name: "B" 
    }, { 
     id: 3, 
     name: "C" 
    }]; 
    this.selectedItems=[]; 
    } 
}