Question

我正在将select2插件集成到aurelia中，并且在绑定从ajax调用接收的数据时遇到问题，并且在我的自定义元素呈现后需要几秒钟。

public function sendGCM($message, $registration_ids) {
    //FCM URL
    $url = "https://fcm.googleapis.com/fcm/send";

    //prepare data
    $fields = array (
        'registration_ids' => array ($registration_ids),
        'data' => array ("message" => $message)
    );
    $fields = json_encode ( $fields ); 

    //header data
    $headers = array ('Authorization: key=<YOUR_API_KEY>', 'Content-Type: application/json');

    //initiate curl request
    $ch = curl_init ();
    curl_setopt ( $ch, CURLOPT_URL, $url );
    curl_setopt ( $ch, CURLOPT_POST, true );
    curl_setopt ( $ch, CURLOPT_HTTPHEADER, $headers );
    curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, true );
    curl_setopt ( $ch, CURLOPT_POSTFIELDS, $fields );

    // execute curl request
    $result = curl_exec ( $ch );

    //close curl request
    curl_close ( $ch );

    //return output
    return $result;
}

import 'select2'
import 'select2/css/select2.css!'
import {
    bindable,
    bindingMode,
    customElement,
    inject
} from 'aurelia-framework'
import $ from 'jquery'

@customElement('select2') 
@inject(Element) 
export class CustomSelect {
    @bindable name = null 
    @bindable({ defaultBindingMode: bindingMode.twoWay }) selected = {} 
    @bindable options = [] 
    @bindable labelField = "label"
    @bindable valueField = "value"

    constructor(element) {
        this.element = element
    }

    bind() {
      this.isComplexModel = this.options && this.options.length > 1 && (typeof this.options[0] !== "string" && typeof this.options[0] !== "number")
      this.translateModel()

      this.selectedValue = this.options[0].value
      this.selectedValue = !this.selected ? this.selectedValue : this.selected[this.valueField]
    }

    attached() {
        $(this.element).find('select')
            .val(this.selectedValue)
            .select2()
            .on('change', (event) => {
                if (this.isComplexModel) {
                  this.selected = event.currentTarget.selectedOptions[0].model
                } else {
                  this.selected = event.currentTarget.selectedOptions[0].model.value
                }
                
                let changeEvent

                if (window.CustomEvent) {
                    changeEvent = new CustomEvent('change', {
                        detail: {
                            value: event.target.value
                        },
                        bubbles: true
                    })
                } else {
                    changeEvent = document.createEvent('CustomEvent')
                    changeEvent.initCustomEvent('change', true, true, {
                        detail: {
                            value: event.target.value
                        }
                    })
                }
                $(this.element).val(event.target.value)
                this.element.dispatchEvent(changeEvent)
            })
    }

    translateModel() {
      if (this.isComplexModel) {
        this.options = this.options.map((option) => $.extend(option, {"label": option[this.labelField], "value": option[this.valueField]}))
      } else {
        this.options = this.options.map((option) => $.extend({}, {"label": option, "value": option}))
      }
    }
}

在这段代码中，附加只被调用一次（此时，提供的选项是未定义的）我找不到任何方法来更新select2与我从API获得的最新数据。

我需要你的帮助才能使这个自定义元素在选项更改状态时可用。提前谢谢！

Answer 1

我意识到自问这个问题已经很久了，但我自己刚刚在Aurelia完成了Select2 v4.0.3的实现。我想我可以和你分享。这与你的方法有点不同，它可能不是完美的解决方案，但你可以看看。也许你会受到鼓舞：）

https://github.com/Kla3mus/select24aurelia

单选和多选模式应该有效。对于您设置的值，Select2有点挑剔，因此选择的应该是整数数组。

它是打字稿，而不是JavaScript，但根据您的需要修改它应该相当容易。

在aurelia中集成select2插件

1 个答案: