Question

这是代码：

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上分配值，因为当你开始选择日期/时间值时鼠标输出就不起作用了。我也试过模糊，但也没用。

我哪里错了？

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

Answer 1

看起来你被jQuery UI的CSS绊倒了。将datepicker绑定到<input>时，jQuery UI会向hasDatepicker添加<input>类。然后你这样做：

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

<{1>}上的

和<input>中的'std hasDatepicker'。

有太多事情会让cls陷入困境，因此您最好使用别的东西来识别您想要更改的属性。如果只有一个class，则可以使用id：

std

或 <input id="std" class="std" ...> // JavaScript var cls = e.currentTarget.id;属性：

name

或者甚至是HTML5数据属性：

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

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

我认为 <input class="std" data-attr="std" ...> // JavaScript var cls = $(e.currentTarget).data('attr');属性最自然：http://jsfiddle.net/ambiguous/RRKVJ/

还有几个问题：

您的小提琴包括多个版本的jQuery，这通常是一个坏主意。
您不必为set构建对象，如果您只设置一个属性，则可以只说name。
您的观点中没有m.set(attr, value)，较新的主干this.$el已经缓存。
$(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);。

datetimepicker和Backbone.View交互

1 个答案: