Question

我正在尝试实现漂亮的timepicker，我有弹出位工作，但它似乎没有绑定到我的输入框。

这是在线工作： http://www.themeon.net/nifty/v2.2.3/forms-components.html
在开发人员工具中查找我设法获取代码和位置文件存储：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" />

我说的弹出窗口确实有效，只是没有绑定，我觉得它会变得愚蠢但我自己也看不到。

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

更新文本框，但不会将更新后的值传递回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();
     });

漂亮 - 表单组件 - 时间

1 个答案: