Aurelia Js選擇框不能正常工作

我是Aurelia Js的新手，在這裏，我正在使用一個簡單的選擇框，但它在更改值時不工作。Aurelia Js選擇框不能正常工作

HTML：

<select value.bind="selectVal" change.delegate="changed()"> 
         <option value="" disabled selected>Doc.Type</option> 
         <option value="1">Option 1</option> 
         <option value="2">Option 2</option> 
         <option value="3">Option 3</option> 
        </select>

型號： this.selectVal = ''; changed(){ alert(); } change.delegate而改變的值沒有被觸發。另外，datepicker值不在模型中加載。會有什麼問題？這是從我的結尾或形式奧裏利亞js問題。

來源

2016-10-05 sibi

您只能在組件的「attached（）{...}」事件（在DOM呈現後）使用jquery選擇器。 – JayDi

@JayDi對不起，你的意思是jquery選擇器？像$（'＃xx'）。val（）？ – sibi

是的。像：$（'＃dateStart'）。datetimepicker（{locale：'ru'，format：'DD.MM.YYYY'}）; – JayDi

使用Materialise時（從原始問題的評論中可以看出），select元素不會觸發任何change事件。您將不得不聽jQuery change事件並在事件處理程序中觸發CustomEvent。

像這樣：

_suspendUpdate = false; 
attached() { 
    $(this.option).material_select() 
    $(this.option).on('change', e => { 
    if (!this._suspendUpdate) { 
     let customEvent = new CustomEvent('change', {}); 
     this._suspendUpdate = true; 
     this.option.dispatchEvent(customEvent); 
     this._suspendUpdate = false; 
    } 
    }); 
}

注：需要在suspendUpdate「絕招」，因爲change自定義事件也引起了jQuery解僱自己的change事件導致一個無限循環。

以上的片段中的視圖模板：

<template> 
    <require from="materialize/dist/css/materialize.css"></require> 
    <div class="input-field col s12"> 
    <select ref="option" value.bind="optionSelect"> 
    <option value="" disabled selected>Choose your option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
    <p>Selected value: ${optionSelect}</p> 
    </div> 
</template>

這裏也是這表明這種方法的gist.run： https://gist.run/?id=4e7dd11228407e765844570409d210bd

當然，如果你使用Materialise公司與Aurelia路上，你可以也使用Materialise橋：http://aurelia-ui-toolkits.github.io/demo-materialize/#/about

聲明：我是Aurelia Materialise橋的創造者之一。

來源

2016-10-05 12:57:11 Daniel

嗨丹尼爾，我試過你的代碼，它會拋出一個控制檯錯誤，'app.js：8 Uncaught RangeError：最大調用堆棧大小超過'。我需要觸發一個功能，在變化。 – sibi

已更新。我不確定jQuery'change'處理程序中的'this'實際上是否工作，因爲jQuery會重新分配它。如果是這種情況，您需要將'this'分配給另一個var並在處理程序中使用它。感謝丹尼爾， – Daniel

，它確實運作良好。非常感謝。 – sibi

Aurelia Js選擇框不能正常工作

回答

相關問題