如何刷新自举选的选项从AJAX API

Question

我已创建奥里利亚自定义负载数据后，属性代码如下

@customAttribute('bt-select') 
@inject(Element) 
export class BootstrapSelect { 
    @bindable val; 
    @bindable list; 

    constructor(element) { 
    this.element = element; 

    } 

    attached() { 
    $(this.element).selectpicker(); 
    } 

    valChanged(newValue, oldValue) { 
     $(this.element).selectpicker("val",_.isObject(newValue)?newValue.id:newValue); 
    } 

    listChanged(newValue, oldValue) { 
    setTimeout(()=>{ 
     $(this.element).selectpicker("refresh"); 
    },300) 
    } 

    detached(){ 
    this.val = null; 
    this.list = null; 
    $(this.element).selectpicker("destroy"); 
    } 

} 

，并用它作为下面从

<select value.bind="form.category" data-width="100" 
           bt-select="val.bind:form.category;list.bind:categorys;"> 
          <option value="">select:category</option> 
          <option repeat.for="category of categorys" 
            value="${category.id}"> 
          ${category.name} 
          </option> 
         </select> 

选择的选项标签重复类别道具类别，this.categorys loda ajax api数据，它是异步步骤呈现选择选项标记 ，我必须添加setTimeout func listChanged方法等待aurelia呈现select的选项标记com然后强制刷新引导选择组件

我觉得它不好，但我没有更好的方法来解决它，我知道许多jQuery插件应该使用完成的DOM元素并呈现它们，但在aurelia框架中附加（）方法，异步api的一些数据加载 是否有一些后处理方法或异步数据绑定到dom后要调用的事件

Answer 1

您可以排队一个微任务，确保您的函数将在更新后运行DOM。例如：

//... 
import { TaskQueue } from 'aurelia-task-queue'; 

@inject(Element, TaskQueue) 
export class BootstrapSelect { 
    //... 
    constructor(element, taskQueue) { 
    this.element = element; 
    this.taskQueue = taskQueue; 
    } 

    listChanged(newValue, oldValue) { 
    // at this point, a micro-task for updating the dom is already queued. 
    // now, you should queue a new task that will run after the previous one is completed. 
    this.taskQueue.queueMicroTask(() => { 
     $(this.element).selectpicker("refresh"); 
    }); 
    } 
} 

类似的问题：@bindable changeHandler fires before bindings are done updating

希望这有助于！