Jquery ui datetimepicker和主干。查看交互

代码如下：

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链接，说明了我的问题

看起来你被jQuery UI的CSS绊倒了。将日期选择器绑定到

时，jqueryui将向

添加

hasDatepicker

类。然后你要这样做：

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

在

上，在

cls

中获取

'std hasDatepicker'

有太多的东西会扰乱

类

，因此最好使用其他东西来确定要更改的属性。如果只有一个

std

，则可以使用

id

：

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

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

或者甚至是HTML5数据属性：

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

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

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

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

//JavaScript
var cls=$（e.currentTarget）.data（'attr'）；

我认为

name

属性是最自然的：

还有几个次要问题：

• 你的小提琴包含了多个版本的jQuery，这通常是个坏主意
• 您不必为构建对象，如果只设置一个属性，可以说just

  m.set（attr，value）

• 您不必在视图中

  $（this.el）

  ，较新的主干已经缓存

• console.log

  可以处理多个参数，因此可以说

  console.log（'Std:'，attrs.Std'，Pod:'，attrs.Pod'，Poa:'，attrs.Poa）而不是控制台.log（'Std:'+attrs.Std+'Pod:'+attrs.Pod+'Poa:'+attrs.Poa'）+

  在背后把事情串起来

---

直到

失去焦点，才会触发更改事件。听起来像是发生了什么？如果是这样，那么datetimepicker中应该有一个合适的事件可以使用。根据我观察到的情况，datetimepicker在选择所需的日期/时间值之前会失去焦点。我将调查datetimepicker的事件。谢谢你的链接。但是在值改变后它需要失去焦点。你能在jsfiddle.net或jsbin.com上设置一个演示，以便更容易地看到正在发生的事情吗？@mu太短了，带有jsfiddle链接的编辑问题。