aurelia 自定义元素日期 - 更新时漂亮的日期选择器更新值

Question

我创建了一个自定义元素 (date.html/date.js)。如果我在编辑页面上使用它，这将非常有用。它已经绑定了对象（选定值 = ''）然后它 returns 来自数据库的数据库对象（我的编辑数据），此时我需要重新绑定选定值。

我创建的另一个自定义元素（下拉列表）遇到了这个问题，我通过添加 'selectedChanged' 解决了这个问题，然后在它进入数据库后重新绑定。

我的问题是，我已经尝试过 selectedChanged 并添加了一个调试器（它从未成功），我想那是因为我应该使用其他东西，但我不知道是什么？

selectedChanged(){
    // if chosen item isnt = selected then set it
    var currentSelected = $('select', this.element).find(':selected').val();
    if(currentSelected != this.selected) {           

            $('select', this.element).val(this.selected);
            $('select', this.element).trigger("chosen:updated");
    }
}

date.js

import {customElement, bindable, inject, bindingMode} from 'aurelia-framework';
    import {activationStrategy} from 'aurelia-router';
    import $ from 'jquery';

@customElement('date')
@bindable({name: 'value', attribute: 'value', defaultValue: '', defaultBindingMode: bindingMode.twoWay})
@inject(Element)
export class Date {
    constructor(element) {
        this.element = element;
        this.pickerDate = '';
    }

    bind(){
        var options = {
            autoclose: true, 
            format: 'dd/mm/yyyy',
        };

        $('.input-group.date', this.element).datepicker(options).datepicker('update', this.value);

        $('.input-group.date', this.element).on('changeDate', (event) => {           
            this.value = $('.input-group.date', this.element).datepicker('getUTCDate');
        });
    }
}

**date.html**
<template>
    <div class="input-group date">
        <input type="text" class="form-control" disabled.bind="readonly" />
        <span class="input-group-addon"><i class="fa fa-calendar fa-lg"></i></span>
    </div>
</template>

我不是真正的前端 js 等所以不知道它期待什么？

Answer 1

请注意我的@bindable 对象（用于日期输入框）调用 'value' 因此在构造函数下我添加了 'valueChanged()'

完整代码：

import {customElement, bindable, inject, bindingMode} from 'aurelia-framework';
import {activationStrategy} from 'aurelia-router';

@customElement('date')
@bindable({name: 'value', attribute: 'value', defaultValue: '', defaultBindingMode: bindingMode.twoWay})

@inject(Element)
export class Date {
    constructor(element) {
        this.element = element;
        this.pickerDate = '';
    }

    valueChanged() {
        var currentvalue = $('.input-group.date', this.element).val();

        if (currentvalue !== this.selected) {
            $('.input-group.date', this.element).datepicker('update', this.value);
        }
    }

    bind(){
        var options = {
            autoclose: true, 
            format: 'dd/mm/yyyy',
        };

        $('.input-group.date', this.element).datepicker(options).datepicker('update', this.value);    

        $('.input-group.date', this.element).on('changeDate', (event) => {           
            this.value = $('.input-group.date', this.element).datepicker('getUTCDate');
        });
    }
}

aurelia 自定义元素日期 - 更新时漂亮的日期选择器更新值

aurelia custom element date - nifty datepicker update value on update

javascript

aurelia

bootstrap-datepicker