Question

我有以下自定义元素：

export class FilterBlockCustomElement {
   @bindable selectedfilters = [];
   @bindable filtergroup;

   //Add or remove item from selectedfilters list
   selectItem(item) {
      var location = this.selectedfilters.indexOf(item.name);
      if(location > -1)
         this.selectedfilters.splice(location);
      else
         this.selectedfilters.push(item.name);
   }
}

及其相关的视图：

<template>
    <div style="color: hsl(200,50%,50%); font-size: 1.2em">
        ${filtergroup.key}
    </div>

    <div click.trigger="selectItem(item)" repeat.for="item of filtergroup.data">
        <div>${item.name}</div><div>${item.count}</div>
    </div>
</template>

我想要发生的是，只要项目被添加到selectedfilters列表中，它就会被高亮显示 - 当它被删除时，突出显示将消失。（我意识到，如果我只是在项目中添加一个属性（即item.selected = true），这可能会有效，但我会出于各种原因试图避免这种情况。）

我将此添加到我的View和VM尝试使其工作：

<div repeat.for="item of filters" style.bind="getColor(item)">...</div>

//In VM
getColor(item){
    return {background-color: this.selectedfilters.indexOf(item.name) > -1 ? "red" : undefined}
}

这适用于初始页面加载，但在列表中添加和删除项目时不会更新视图。

是否有可能让它发挥作用？

Answer 1

如果绑定一个函数，它将在第一次执行，但是如果你更改它的参数值，aurelia将不会检测到它。

试试这个：

<div repeat.for="item of filters" style.bind="itemStyle[$index]">...</div>

//In VM
private itemStyle = new Array();

//Called automatically when filters property change
filtersChanged(){
    this.itemStyle = new Array();
    this.filters.forEach((item, idx) => {
        this.itemStyle[idx] = {background-color: this.selectedfilters.indexOf(item.name) -1 ? "red" : undefined}
    }) 
}

Answer 2

GOT IT！

感谢这个网站：https://www.danyow.net/aurelia-binding-behaviors/我找到了一个叫做信号的东西。我的最终代码如下所示：

VM

import {bindable} from 'aurelia-framework';
import {BindingSignaler} from 'aurelia-templating-resources' //ADDED
import {inject} from 'aurelia-framework' //ADDED

@inject(BindingSignaler) //NEW
export class FilterBlockCustomElement{
    @bindable selectedfilters = [];
    @bindable filtergroup;
    signaler;  //NEW

    constructor(signaler){       //ADDED
        this.signaler = signaler
    }

    selectItem(item){
        var location = this.selectedfilters.indexOf(item.name) ;
        if(location > -1)
            this.selectedfilters.splice(location);
        else
            this.selectedfilters.push(item.name);

        this.signaler.signal('test') //ADDED
    }

    getColor(item){
        var css = {'background-color': this.selectedfilters.indexOf(item.name) > -1 ? "blue" : undefined};
        return css;
    }
}

查看 - 注意样式绑定

<template>
    <div style="color: hsl(200,50%,50%); font-size: 1.2em">
        ${filtergroup.key}
    </div>

    <div style.bind="getColor(item) & signal: 'test'" click.trigger="selectItem(item)" repeat.for="item of filtergroup.data">
        <div>${item.name}</div><div>${item.count}</div>
    </div>
</template>

使用Aurelia发出所选项目的绑定样式

2 个答案: