datetimepicker 和 Backbone.View 交互答案

【问题标题】：datetimepicker and Backbone.View Interactiondatetimepicker 和 Backbone.View 交互
【发布时间】：2012-10-20 01:24:31
【问题描述】：

这是代码：

var MyModel = Backbone.Model.extend({
    defaults: {std:"",
               pod:""
              }
});

var MyView = Backbone.View.extend({
    tagName:'ul',
    events: {
    'change input' : 'changed',  // When input changes, call changed.
    'hover .std'   : 'timepick', // 
    'mouseout .std': 'doesntwork'
    },
    template:_.template($('#mytemplate').html()),

    initialize: function() {
        this.model.bind('change:pod',this.render,this); // When pod changes, re-render
    },
    timepick: function(e) {
        $('.std').each(function(){
            $.datepicker.setDefaults({dateFormat:'mm-dd'});
            $(this).datetimepicker({timeFormat:'hh:mm',ampm:false});
        });
    },
    doesntwork: function() {
        // Would this.model.set here but mouseout happens when you select date/time values with mouse
    },
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },
    changed: function(e) {
        var value = $(e.currentTarget).val();       // Get Change value
        var cls = $(e.currentTarget).attr('class'); //Get Class of changed input
        var obj = {}; 
        obj[cls] = value;                       // The model variables match class names
        this.model.set(obj);                        // this.model.set({'std':value})
    }
});

我正在处理的 UI 中有一个 datetimepicker，并且难以将从 datetimepicker 中选择的值分配给 MyModel。

从使用 console.log 输出来看，单击 DTP 时会触发“更改输入”并分配默认值 (MM-DD 00:00)。即使您选择了与默认值不同的日期/时间值，也不会再次触发“更改输入”，除非您单击输入框（第二次），然后分配正确的值。不是很人性化。

所以我的想法是，我只在 mouseout 上分配值，这不起作用，因为当您开始选择日期/时间值时会发生 mouseout。我也试过模糊，但也没有用。

我哪里出错了？

编辑：这是一个 jsfiddle.net 链接，说明了我的问题http://jsfiddle.net/9gSUe/1/

【问题讨论】：

直到<input> 失去焦点the HTML spec even says so 才会触发更改事件。这听起来像是正在发生的事情吗？如果是这样，那么您可以使用 datetimepicker 中的适当事件。
据我观察，日期时间选择器在选择所需的日期/时间值之前失去焦点。我将研究 datetimepicker 的事件。也感谢您的链接。
但是在值改变之后需要失去焦点。您可以在 jsfiddle.net 或 jsbin.com 上设置一个演示，以便更轻松地了解正在发生的事情吗？
@mu 太短，用 jsfiddle 链接编辑问题。

标签： jquery-ui backbone.js

【解决方案1】：

看起来您被 jQuery UI 的 CSS 绊倒了。当您将日期选择器绑定到<input> 时，jQuery UI 将向<input> 添加一个hasDatepicker 类。然后你这样做：

var cls = $(e.currentTarget).attr('class');

在<input> 上并在cls 中获取'std hasDatepicker'。

class 有太多东西会弄乱，所以你最好使用其他东西来识别你想要更改的属性。如果只有一个std，您可以使用id：

<!-- HTML -->
<input id="std" class="std" ...>

// JavaScript
var cls = e.currentTarget.id;

或name 属性：

<!-- HTML -->
<input name="std" class="std" ...>

// JavaScript
var cls = $(e.currentTarget).attr('name');

或者甚至是 HTML5 数据属性：

<!-- HTML -->
<input class="std" data-attr="std" ...>

// JavaScript
var cls = $(e.currentTarget).data('attr');

我认为name 属性是最自然的：http://jsfiddle.net/ambiguous/RRKVJ/

还有几个附带问题：

您的小提琴包含多个版本的 jQuery，这通常是个坏主意。
您不必为set 构建对象，如果您只是设置一个属性，您可以只说m.set(attr, value)。
您不必在视图中显示 $(this.el)，较新的 Backbones 已经缓存了 this.$el。
console.log 可以处理多个参数，因此如果您不希望 + 在背后串起内容，可以使用 console.log('Std: ', attrs.std, ' Pod: ', attrs.pod, ' Poa: ', attrs.poa); 而不是 console.log('Std: ' + attrs.std + ' Pod: ' + attrs.pod + ' Poa: ' + attrs.poa);。

【讨论】：