Comment actualiser bootstrap sélectionnez les options de après les données de charge de ajax api

Question

je créer un code d'attribut aurelia personnalisé comme ci-dessous

@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"); 
    } 

} 

et l'utiliser comme ci-dessous

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

les options de la sélectionner Répétition de l'étiquette de catégories de prop de classe, this.categorys loda données de ajax api, c'est étape asynchrone pour rendre l'étiquette d'option de sélection et je dois ajouter setTimeout func en listChanged méthode d'attendre aurelia rendre le choix des options tag com plète puis force rafraîchir bootstrap-select composante

Je pense que ce n'est pas bon, mais je n'ai pas de meilleure façon de le résoudre, Je konw beaucoup de plugin jQuery devrait utiliser élément dom terminé et les rendre, mais dans aurelia cadre ci-joint méthode(), une charge de données de async api est là ont des méthodes de post-traitement ou d'un événement pour invoquer après les données async avaient se lier à dom

Answer 1

Vous pouvez la file d'attente d'un micro-tâche, faire en sorte que votre fonction se déroulera après la mise à jour le DOM. Par exemple:

//... 
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"); 
    }); 
    } 
} 

question similaires: @bindable changeHandler fires before bindings are done updating

Hope this helps!