aurelia - 下拉列表未在加载时从数据库中选择值
aurelia - dropdown not selecting value from db on load
我正在使用 aurelia 并有一个下拉菜单。它将 GroupId 正确传递回我的保存功能,但是在编辑项目时它没有选择任何内容。
return this.dataContext.getBaseContent(this.id)
.then(baseContent => this.baseContent = baseContent);
<dropdown disabled.bind="readonly" options.bind="core.GetVariableGroups()" selected.bind="baseContent.GroupId" />
HTML 的下拉菜单
<div class="chosen-container chosen-container-single" style="width: 877px;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Choose an option...</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search"><input type="text" autocomplete="off"></div>
<ul class="chosen-results">
<li class="active-result au-target" data-option-array-index="1">Option 1</li>
<li class="active-result au-target" data-option-array-index="2">Option 2</li>
<li class="active-result au-target" data-option-array-index="3">Option 3</li>
</ul>
</div>
</div>
<template>
<select disabled.bind="disabled" class="form-control" data-placeholder.bind="placeholder" value.bind="selected">
<option repeat.for="option of options" value.bind="option.Id" text.bind="option.Name"></option>
</select>
</template>
{"$type":"Admin.Contracts.Pocos.Development.ApplicationVariables.BaseContentModel, Admin.Contracts","Id":441,"GroupId":1,"GroupName":"Option 1"
我发现了问题,但不确定如何解决。它在关闭之前已经绑定了值并从数据库中获取数据。我需要它在 'complete' 上重新绑定,但不确定如何执行此操作。
这是必需的:在构造函数下面添加,你需要触发一个chosen:update。
selectedChanged(){
// if chosen item isnt = selected then set it
var currentSelected = $('select', this.element).find(':selected').val();
if(currentSelected != this.selected) {
if(this.options.some(o => o.Id == this.selected)){
$('select', this.element).val(this.selected);
$('select', this.element).trigger("chosen:updated");
}
else{
// new selected isnt in list of options..
// set back to prev value
this.selected = currentSelected;
}
}
}
我正在使用 aurelia 并有一个下拉菜单。它将 GroupId 正确传递回我的保存功能,但是在编辑项目时它没有选择任何内容。
return this.dataContext.getBaseContent(this.id)
.then(baseContent => this.baseContent = baseContent);
<dropdown disabled.bind="readonly" options.bind="core.GetVariableGroups()" selected.bind="baseContent.GroupId" />
HTML 的下拉菜单
<div class="chosen-container chosen-container-single" style="width: 877px;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Choose an option...</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search"><input type="text" autocomplete="off"></div>
<ul class="chosen-results">
<li class="active-result au-target" data-option-array-index="1">Option 1</li>
<li class="active-result au-target" data-option-array-index="2">Option 2</li>
<li class="active-result au-target" data-option-array-index="3">Option 3</li>
</ul>
</div>
</div>
<template>
<select disabled.bind="disabled" class="form-control" data-placeholder.bind="placeholder" value.bind="selected">
<option repeat.for="option of options" value.bind="option.Id" text.bind="option.Name"></option>
</select>
</template>
{"$type":"Admin.Contracts.Pocos.Development.ApplicationVariables.BaseContentModel, Admin.Contracts","Id":441,"GroupId":1,"GroupName":"Option 1"
我发现了问题,但不确定如何解决。它在关闭之前已经绑定了值并从数据库中获取数据。我需要它在 'complete' 上重新绑定,但不确定如何执行此操作。
这是必需的:在构造函数下面添加,你需要触发一个chosen:update。
selectedChanged(){
// if chosen item isnt = selected then set it
var currentSelected = $('select', this.element).find(':selected').val();
if(currentSelected != this.selected) {
if(this.options.some(o => o.Id == this.selected)){
$('select', this.element).val(this.selected);
$('select', this.element).trigger("chosen:updated");
}
else{
// new selected isnt in list of options..
// set back to prev value
this.selected = currentSelected;
}
}
}