Question

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

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

我的问题是，我尝试过selectChanged并添加了一个调试器（它永远不会被命中），我在想这是因为我应该使用别的东西，但我不知道是什么？

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对象（对于日期输入框）是调用＆＃39;值＆＃39;因此，在构造函数下，我添加了＆＃39; valueChanged（）＆＃39;

完整代码：

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自定义元素日期 - 更新

1 个答案: