0

这是代码：

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/

4

1 回答 1

1

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

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

上<input>并'std hasDatepicker'进入cls。

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

<!-- 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)在您的视图中，较新的 Backbonesthis.$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);如果您不想+在背后对事物进行字符串化。
于 2012-10-18T17:58:57.767 回答