select does not data bind

[manuel-guilbault]

select does not data bind

[dpinart]

I was writing this same behavior and hoped this plugin could help me!! material_css hides the original selects and build up an ul element with as manyli items as the options has the original select. When a user clicks on an li item, materialize_css sets to the matching option element selected property and triggers the 'change' event on the select element.

I've typed an implementation of this behavior in type script I'm sharing below, hope it helps. Usage is quite straitghtforward but it requires a couple of extra bindings. Example:

<select mat-select="items.bind: values; selection.two-way: my-property"  >
        <option disabled selected>Select an option</option>
        <option repeat.for="value of values" model.bind="value">${value}</option>
</select>

Following code only works for single selection and when option is bind to the model.

The typescript code:

/**
 * Created by dpinart on 05/08/2015.
 */
import {customAttribute, autoinject, bindable, TaskQueue} from 'aurelia-framework';
import $ from 'jquery';
@customAttribute('mat-select')
@autoinject

export class MaterializeSelect{
  @bindable items: any[] = null;
  @bindable selection: any = null;
  private _attached: boolean;
  constructor(private _element: Element, private _taskQueue: TaskQueue){}

  public attached(){
    if(this.items)
      this.initSelect();
    this._attached = true;
  }
  public itemsChanged(newValue: any[]){
    //Await until there are items in the select
    if(this._attached && this.items && this.items.length > 0)
      this.initSelect();
  }

  public selectionChanged(newValue: any){
    if(this._attached)
      this.updateSelection();
  }
  private initSelect(){
    //Defer initialization to allow aurelia binding to dinamically built options
    this._taskQueue.queueTask(() =>{
      this.detached();
      $(this._element).material_select();
      $(this._element).change((e)=>{
        var options =  $('option', this._element);
        for(var option of options){
          if(option.selected)
            this.selection = option.model ? option.model : null;
        }
      });
      this.updateSelection();
    });

  }

  public detached(){
    $(this._element).off();
    $(this._element).material_select('destroy');
  }
  private updateSelection():void {
    var options =  $('option', this._element);
    var $selectedOption;
    if(this.selection == null){
      $selectedOption = $(options[0]);
    }else{
      for(var option of options){
        if(option.model == this.selection)
        {
          $selectedOption = $(option);
          break;
        }
      }
    }
    var $list = $(this._element).siblings('ul');
    if($list.text() != $selectedOption.text()){
      var lis = $list.children('li');
      for(var li of lis){
        if($(li).text() == $selectedOption.text()){
          //triggering li causes materiali_select to update original select selection and raises the change event
          $(li).trigger('click');
        }
      }
    }

  }
}