Nifty - 表单组件 - 时间

Question

我正在尝试实现漂亮的时间选择器，我已经让 pop-up 位正常工作，但它似乎没有将其绑定到我的输入框。

这是在线工作： http://www.themeon.net/nifty/v2.2.3/forms-components.html
在 Developer tools 中查找，我设法获取了代码以及文件存储：http://jdewit.github.io/bootstrap-timepicker/（我抓取了 css/js 文件，这些文件存储在本地机器上。

这是我的代码，它是aurelia.io

中的自定义元素

time.js

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

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

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

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

        alert("currentvalue " + currentvalue);
        alert("selected " + this.value);
    }

    bind(){
        var options = {
            minuteStep: 5,
            showInputs: false,
            disableFocus: true
        };

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

        $('.input-group.date', this.element).on('changeTime', (event) => {           
            this.value = $('.input-group.date', this.element).timepicker('getTime');
    });
    }
}

time.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-clock-o fa-lg"></i></span>
    </div>
</template>

引用的地方：

<time value.bind="baseContent.ValidToTime" />

我说的 pop-up 确实有效，只是绑定无效，我认为这会很愚蠢，但我自己看不到。

更新 - 改变了一些东西，它慢慢地到达那里，从我的角度来看似乎有点错误

更新文本框，但不会将更新后的值传回 basecontent（调用它的地方）- 使用 bindingMode.twoway
当我更新文本框而不是使用小部件时，我必须单击关闭才能更新小部件。 14:35 = 应该同时更新。

time.js

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

@customElement('time')
@bindable({name: 'value', attribute: 'value', defaultValue: '', defaultBindingMode: bindingMode.twoWay})
@bindable({name: 'readonly', attribute: 'disabled', defaultValue: false, defaultBindingMode: bindingMode.oneWay})
@inject(Element)
export class Time {
    constructor(element) {
        this.element = element;
    }

    valueChanged() {
        var currentvalue = $('.timepicker', this.element).val();

        if (currentvalue !== this.selected) {
            $('.timepicker', this.element).timepicker('setTime', this.value);
        }
    }

    bind() {
        var options = {
            defaultTime: 'value',
            minuteStep: 1,
            disableFocus: true,
            maxHours: 24,
            showMeridian: false
    };

        $('.timepicker', this.element).timepicker(options).timepicker('setTime', this.value);

        if(this.readonly){
            $('.timepicker', this.element).attr('readonly', 'readonly');
        }

        $('.timepicker', this.element).timepicker().on('changeTime.timepicker', function() {
            this.value = $('.timepicker', this.element).data("timepicker").getTime();
        });
    }
}

Answer 1

嗯，克莱尔，你遇到了 this 的问题。

$('.timepicker', this.element)
    .timepicker()
    .on('changeTime.timepicker', function() {
         this.value = $('.timepicker', this.element).data("timepicker").getTime();
    //   ^^^^ Ouch, wrong context.   
    })
;

你应该在那里使用箭头函数

$('.timepicker', this.element)
    .timepicker()
    .on('changeTime.timepicker', () => {
         this.value = $('.timepicker', this.element).data("timepicker").getTime();
    })
;

或者用老式的方式来做，尽管你不需要 var self = this; 等等。

顺便说一句，您也可以从事件参数中取出值。

$el.timepicker(options)
     .val(this.formatToGMT(this.value))
     .on('changeTime.timepicker', (e) => {
        let update = {hour: e.time.hours,minute: e.time.minutes, second: e.time.seconds};
        this.value = moment(that.value).utcOffset(0).set(update).utc();
     });

Nifty - 表单组件 - 时间

Nifty - Form Components - Time

javascript

timepicker

aurelia