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