将 datetimepicker 与 Backbone 模型一起使用的最佳方法？答案

【问题标题】：Best way to use datetimepicker with Backbone model?将 datetimepicker 与 Backbone 模型一起使用的最佳方法？
【发布时间】：2014-04-25 15:30:21
【问题描述】：

我目前在主干视图中使用 jquery datetimepicker，该视图将为我使用的每个 datepicker 控件绑定一个模型。

我不确定实现此功能的最佳方法是什么，但如果我的 CompositeView 中有多个 datetimepicker 控件，则会出现巨大的渲染缓慢问题。

这是我目前的设置，希望能提供更快或更改的方法。

JQuery _updateDatePicker 代码中似乎也存在瓶颈。 empty() 最终调用 $.cleanData 这是一个窒息。

    /* Generate the date picker content. */
     _updateDatepicker: function(inst) {
             this.maxRows = 4; //Reset the max number of rows being displayed (see #7043)
             instActive = inst; // for delegate hover events
             inst.dpDiv.empty().append(this._generateHTML(inst));

下划线模板代码：

<div style="float:left;">           
    <div class="lbltext" id="startdate-datepicker"></div>                
</div>

CompositeView onRender：

            onRender: function () {
            // Add datetimepicker               
            var dtp_mod = Page.Module("datetimepicker");

            this.dateTimePickerDailyStart = new dtp_mod.View({
                model: new dtp_mod.Model({
                    CurrentDate: null,
                    LabelText: "Start Date",
                    showTimepicker: false

                }),
                el: this.ui.dailystartdatepicker[0]
            }).on("change.datetimepicker", this._onDateChange, this);

【问题讨论】：

标签： jquery backbone.js marionette datetimepicker

【解决方案1】：

好吧，试了一下。见小提琴：http://jsfiddle.net/Cardiff/SbDcZ/。

演示说明
它将显示两个相同的视图，可以使用按钮重新加载。这是为了演示视图的onClose 功能。它还显示视图已同步并显示最新的设置值。

日期时间选择器特定代码

// Itemview (line 16 in jsfiddle)
var movieItemView = Marionette.ItemView.extend({
    tagName: "li",
    className: 'listItem',
    template: "#movie-list-item",
    ui: {
        dateInput: '.datetimepicker'
    },
    onShow: function () {
        // Invoke the datetimepicker plugin
        this.ui.dateInput.datetimepicker({
            // Lazy init to prevent a lot of instances right away
            lazyInit: true,

            // Proxy the callback function to retain view scope
            onChangeDateTime: $.proxy(this.changeDate, this)
        });
    },
    changeDate: function (dp, $input) {
        this.model.set('date', $input.val());
    },
    onClose: function () {
        // Destroy the datetimepicker plugin
        this.ui.dateInput.datetimepicker('destroy');
    },
    modelEvents: {
        'change:date': 'updateDate'
    },
    updateDate: function () {
        // Check if we need to update the date. 
        var modelDate = this.model.get('date');
        if (modelDate != this.ui.dateInput.val()) {
            this.ui.dateInput.val(modelDate);
        }
    }
});

实施说明

使用ui 属性定义输入元素以提供轻松访问。
在实例化插件之前使用onShow 方法。这假设 datetimepicker 插件是 dom 相关的。如果您在 onRender 函数中执行此操作，则依赖于 dom 的插件可能无法按预期工作。
使用lazyInit 选项实例化插件，这在长列表中应该是有益的。
使用onChangeDateTime 函数的代理以保持在视图范围内并提供对视图模型的轻松访问。
在视图关闭时销毁 datetimepicker 插件。这（通常）可以防止僵尸。
收听 `change:date' 以检查值是否已更改。
在updateDate 首先检查我们是否真的需要更新这个视图中的值。在这种情况下，此检查并不是真正必要的，但是如果您使用的插件需要在值更改或任何其他繁重的操作时重新初始化，则检查您是否真的需要这样做可能会有所帮助。

【讨论】：