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) のデフォルト値が割り当てられることがわかります。デフォルトとは異なる日付/時刻の値を選択した場合でも、入力ボックスを (2 回目) クリックしない限り、「入力の変更」は再度トリガーされず、正しい値が割り当てられます。あまりユーザーフレンドリーではありません。

そのため、マウスアウトで値を割り当てるだけでよいという考えがありましたが、日付/時刻の値を選択し始めるとマウスアウトが発生するため、うまくいきませんでした。ぼかしも試しましたが、うまくいきませんでした。

どこが間違っていますか？

編集：これは私の問題を説明する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が1 つしかない場合は、 を使用できます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が含まれていましたが、それは一般的に悪い考えです。
  • のオブジェクトを作成する必要はありません。1 つの属性を設定する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-18T17:58:57.767 に答える