的DateTimePicker和Backbone.View互動

這是代碼：的DateTimePicker和Backbone.View互動

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）時，會觸發'更改輸入'。即使選擇了不同於默認值的日期/時間值，「更改輸入」也不會再次觸發，除非您單擊輸入框（第二次），然後分配正確的值。不太用戶友好。

所以我有這樣的想法，我只是在鼠標指定值，這是沒有用的，因爲當你開始選擇日期/時間值時發生鼠標移動。我也嘗試模糊，而這也沒有奏效。

我哪裏錯了？

編輯：這是說明http://jsfiddle.net/9gSUe/1/

來源

2012-10-17 fbynite

直到''失去焦點，[HTML規範甚至會這樣說]（http://stackoverflow.com/a/10579168/479863）之後，纔會觸發更改事件。這聽起來像發生了什麼？如果是這樣，那麼應該有一個datetimepicker可以使用的適當事件。 –

從我觀察到的情況來看，datetimepicker在選擇所需的日期/時間值之前失去焦點。我會研究datetimepicker的事件。感謝您的鏈接。 – fbynite

但它需要在*值改變後失去焦點*。你可以在jsfiddle.net或jsbin.com上設置演示，以便更容易地看到發生了什麼？ –

看起來你要通過jQuery用戶界面的CSS絆倒了我的問題jsfiddle.net鏈接。當您將日期選擇器綁定到<input>時，jQuery UI會將hasDatepicker類添加到<input>。然後，你這樣做：

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

在 <input>

和cls得到'std hasDatepicker'。

有太多的東西會與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)，較新的骨幹已經緩存了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);如果你不想+你背後字符串化的東西。

來源

2012-10-18 17:58:57

它的工作原理！我感謝你的時間和精力。謝謝。 – fbynite

的DateTimePicker和Backbone.View互動

回答

相關問題