双向绑定不适用于带有 aurelia 的 bootstrap-select
[英] Two way binding not working on bootstrap-select with aurelia
本文介绍了双向绑定不适用于带有 aurelia 的 bootstrap-select的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我设法创建了一个自定义元素来使用 boostrap-select 元素.但是，我可以从主视图(父视图)向它传递/绑定值，但是当我使用双向绑定时，我无法从元素中获取选择.
我的自定义元素是:
import {inject, customElement, bindable} from 'aurelia-framework';从bootstrap-select"导入 * 作为选择器@customElement('选择选择器')导出类 BootStrapSelectPicker {@bindable selectableValues = null;@bindable newValue = null;@bindable selectedValue = 10;构造函数(){}随附的(){$('.selectpicker').selectpicker({风格:'btn-信息'，尺寸:4});$('.selectpicker').on('change', function(){var selected = $(this).find("option:selected").val();this.selectedValue = 选中；控制台日志(this.selectedValue)；});$('.selectpicker').val(this.selectedValue);<--这里的选择是正确的$('.selectpicker').selectpicker('刷新');}}
对应的视图为:
<select class="selectpicker"><option repeat.for="p of selectableValues">${p}</option></选择>
我使用自定义元素的包含视图是:
<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">名称:${p.propertyName}</label><input type="text" value.bind="p.propertyValue" class="form-control" id="ln" >
<div if.bind="p.propertyType == '整数'"><div class="form-group"><label for="ln">名称:${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>
我希望 p.selectedValue 会在使用选择控件进行选择后更改，如下所示，使用双向命令:
selected-value.two-way="p.selectedValue"
然而，p.selectedValue 并没有改变.
知道为什么这不起作用吗?
解决方案
原来是一个简单的范围问题:
附加(){$('.selectpicker').selectpicker({风格:'btn-信息'，尺寸:4});$('.selectpicker').on('change', function(){var selected = $(this).find("option:selected").val();this.selectedValue = 选中；//<-- 这里不再指虚拟机//如果你看上面那行，你用 jq 包裹了 $(this)，这行得通//因为 'this' 现在在调用元素的范围内，但是//不引用 aurelia 视图模型控制台日志(this.selectedValue)；});$('.selectpicker').val(this.selectedValue);$('.selectpicker').selectpicker('刷新');}
简单的解决方法是:
附加(){var self = this;//<--- 创建对 VM 的引用$('.selectpicker').selectpicker({风格:'btn-信息'，尺寸:4});$('.selectpicker').on('change', function(){var selected = $(this).find("option:selected").val();//把它改成自己self.selectedValue = 选择；//<--- 正确的对象现在获取值 - 绑定有效控制台日志(this.selectedValue)；});$('.selectpicker').val(this.selectedValue);$('.selectpicker').selectpicker('刷新');}
我不确定这将如何在 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 的 bootstrap-select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
