aurelia自定义元素date-nifty日期选择器在更新时更新值

aurelia custom element date - nifty datepicker update value on update

本文关键字：更新 选择器 日期 自定义 元素 date-nifty aurelia      更新时间：2023-09-26

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

我创建的另一个自定义元素（下拉列表）出现了这个问题，我通过添加"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等，所以不知道它期待什么？

请注意，我的@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');
        });
    }
}
相关文章：