如何在 aurelia 中的多 select 下拉菜單上創建可觀察對象

Question

我目前有一個下拉列表，當用戶點擊一個選項時，它會自動獲取我過濾為可觀察值的值，如下所示

public months: any=[];
@observable
    public selectedMonth: string= "";
async onLoad() {
        this.months = Moment.months();
        }
public selectedMonthChanged() {
        if (this.selectedMonth != "") {
            this.update();
        }
        
    }
<select  md-select value.bind="selectedMonth">
                        <option value="" disabled>Month</option>
                        <option repeat.for="month of months" value.bind="month" click.delagate="selectedMonthChanged()">${month}</option>
                    </select>

so the above works when i select an option it calls the selectedMonthChanged() function.But now i am trying to add a multiselect as follows and i cant get back a list of the items selected and it doesnt call the selectedMonthChanged() function

這是我試過的

public months: any=[];
    @observable
        public selectedMonth: any = [];
    async onLoad() {
            this.months = Moment.months();
            }
    public selectedMonthChanged() {
            if (this.selectedMonth != []) {
                this.update();
            }
            
        }
    <select  multiple md-select value.bind="selectedMonth">
                            <option value="" disabled>Month</option>
                            <option repeat.for="month of months" value.bind="month" click.delagate="selectedMonthChanged()">${month}</option>
                        </select>

知道如何將值列表作為可觀察值傳遞嗎？

Answer 1

這里有幾件事。 我認為問題在於具有value.bind的選項，而不是根據 Aurelia 1 文檔具有model.bind的選項。

其次，我想提一下，如果您使用的是 Aurelia 2，即使使用最新版本，@obserable 注釋也會有點不穩定。 我建議無論如何都使用@watch 注釋以獲得更好的代碼可讀性。 我相信這僅在 Aurelia 2 中可用，但它可能在 Aurelia 1 中可用。現在使用 Au2 有一段時間了。

selectedMonth;

@watch('selectedMonth')
someFunctionName() {
   if (this.selectedMonth != []) {
      this.update();
   }
}

請注意，這可以深入到 object 中。 @watch('someObject.someObject.someObject.someProperty')整潔。 也可以將多個@watch注釋應用於單個 function。