两种方式的绑定不适用于Aurelia进行引导选择 [英] Two way binding not working on bootstrap-select with aurelia

问题描述

我设法创建了一个自定义元素以使用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能够在使用select控件进行选择后发生变化，如下面的双向命令所示:

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

但是，p.selectedValue不变.

有什么想法为什么不起作用?

解决方案

原来是一个简单的范围问题:

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，因此绝对值得提防

I have managed to create a custom element to use the boostrap-select element. However, I can pass/bind values to it from the main view (parent) but I am unable to get the selection out from the element when I use two-way binding.

My custom element is:

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');

 }
}

The corresponding view is:

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

My containing view that uses the custom element is:

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

I expected p.selectedValue to change once a selection is made with the select control as shown here with the two-way command:

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

However, p.selectedValue is not changing.

Any ideas why this is not working?

解决方案

Turns out to be a simple scope issue:

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');

 }

Simple fix is:

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');

 }

I'm not sure how this will actually be handled in ES6/7 - I'm sure I read somewhere about how this will change, but since you are transpiling to ES5 it's definitely something to watch out for

这篇关于两种方式的绑定不适用于Aurelia进行引导选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！