2

カスタム要素を作成して、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 は変更されていません。

これが機能しない理由はありますか？

4

2 に答える 2

2

単純なスコープの問題であることが判明しました：

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 にトランスパイルしているので、注意が必要なことは間違いありません。

于 2015-04-27T01:08:01.843 に答える