Двусторонняя привязка не работает на bootstrap-select с aurelia

Question

Мне удалось создать пользовательский элемент для использования элемента boostrap-select. Тем не менее, я могу передавать/привязывать значения к нему из основного представления (родительского), но я не могу получить выделение из элемента, когда я использую двустороннюю привязку.

Мой пользовательский элемент:

import {inject, customElement, bindable} from 'aurelia-framework'; 
import * as selectpicker from 'bootstrap-select' 

@customElement('select-picker') 
export class BootStrapSelectPicker { 
    @bindable selectableValues = null; 
    @bindable newValue = null; 
    @bindable selectedValue = 10; 

constructor(){ 
} 


attached(){ 
    $('.selectpicker').selectpicker({ 
     style: 'btn-info', 
     size: 4 
    }); 

$('.selectpicker').on('change', function(){ 
    var selected = $(this).find("option:selected").val(); 

    this.selectedValue = selected; 
    console.log(this.selectedValue); 
    }); 

    $('.selectpicker').val(this.selectedValue); <-- the selection here is correct 
    $('.selectpicker').selectpicker('refresh'); 

} 
} 

Соответствующее мнение:

<template> 
    <select class="selectpicker"> 
    <option repeat.for="p of selectableValues">${p}</option> 
    </select> 
</template> 

Мой содержащий вид, который использует пользовательский элемент является:

<template> 
    <require from="./select-picker"></require> 

    <ul class="list-group"> 
    <li class="list-group-item" repeat.for="p of messageProperties"> 
    <div if.bind="p.propertyType == 'string'"> 
     <div class="form-group"> 
     <label for="ln">Name: ${p.propertyName}</label> 
     <input type="text" value.bind="p.propertyValue" class="form-control" id="ln" > 
     </div> 
    </div> 
    <div if.bind="p.propertyType == 'integer'"> 
     <div class="form-group"> 
     <label for="ln">Name: ${p.propertyName}</label> 
     <input type="text" value.bind="p.selectedValue" class="form-control" id="ln" > 
     <select-picker selectable-values.bind="p.selectableValues" 
      selected-value.two-way="p.selectedValue"></select-picker> 
    </div> 
    </div> 
    </li> 


</ul> 
</template> 

Я ожидал p.selectedValue для изменения после выбора с помощью элемента управления выбора, как показано здесь, с помощью двухсторонней команды:

selected-value.two-way="p.selectedValue" 

Однако p.selectedValue не меняется.

Любые идеи, почему это не работает?

Answer 1

Оказывается простой вопрос сфера:

attached(){ 
    $('.selectpicker').selectpicker({ 
     style: 'btn-info', 
     size: 4 
    }); 

$('.selectpicker').on('change', function(){ 
    var selected = $(this).find("option:selected").val(); 

    this.selectedValue = selected; // <-- This here doesn't refer to the VM any more 
    // if you look at the line above you are wrapping $(this) with jq, this works 
    // because 'this' is now in the scope of the calling element but 
    // doesn't refer to the aurelia viewmodel 
    console.log(this.selectedValue); 
    }); 

    $('.selectpicker').val(this.selectedValue); 
    $('.selectpicker').selectpicker('refresh'); 

} 

Простое исправление:

attached(){ 

    var self = this; // <--- Create a ref to the VM 

$('.selectpicker').selectpicker({ 
     style: 'btn-info', 
     size: 4 
    }); 

$('.selectpicker').on('change', function(){ 
    var selected = $(this).find("option:selected").val(); 
    // Change this to self 
    self.selectedValue = selected; // <--- Correct object gets the value now - binding works 
    console.log(this.selectedValue); 
    }); 

    $('.selectpicker').val(this.selectedValue); 
    $('.selectpicker').selectpicker('refresh'); 

} 

Я не знаю, как это на самом деле будет обрабатываться в ES6/7 - Я конечно, я где-то читал о том, как изменится this, но поскольку вы переводите на ES5, это определенно нужно следить за

Answer 2

Следующий код работает для меня, тот же вопрос:

import {inject, customElement, bindable} from 'aurelia-framework'; 
import 'bootstrap-select' 

@customElement('select-picker') 
@inject(Element) 
export class BootStrapSelectPicker { 
    @bindable name: string; 
    @bindable selectableValues; 
    @bindable selectedValue; 

    constructor(private element) { 
    } 

    attached() { 
     var self = this; 
     var $: any = jQuery; 
     var $elm = $(self.element).find('select'); 
     if ($elm.length > 0) { 
      $elm.selectpicker(); 
      $elm.on('change', function() { 
       self.selectedValue = $(this).find("option:selected").val(); 
      }); 
      this.refreshPicker($elm); 
     } 
    } 

    selectedValueChanged(newValue, oldValue) { 
     var $: any = jQuery;   
     var $elm = $(this.element).find('select'); 
     this.refreshPicker($elm); 
    } 

    private refreshPicker = ($elm) => {   
     $elm.val(this.selectedValue); 
     $elm.selectpicker('refresh');   
    } 
}