Question

我创建了aurelia自定义属性代码，如下所示

@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>

select的选项标签从类prop propys重复，this.categorys来自ajax api的loda数据，它是异步步骤来渲染选择选项标签我必须在setTimeout方法中添加listChanged func以等待aurelia渲染select的选项标记完成，然后强制刷新bootstrap-select组件

我觉得这不好，但我没有更好的方法来解决它，我知道很多jQuery插件应该使用完成的dom元素并渲染它们，但是在aurelia框架中附加了（）方法，一些数据从async 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

希望这有帮助！

如何在从ajax api

1 个答案: