Question

我目前在骨干视图中使用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);

Answer 1

好吧，对此嗤之以鼻。请参阅小提琴：http://jsfiddle.net/Cardiff/SbDcZ/。

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

Datetimepicker特定代码

// 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 插件。这（通常）可以防止僵尸。
听取'改变：约会＆＃39;检查值是否已更改。
在updateDate中首先检查我们是否真的需要更新此视图中的值。在这种情况下，这种检查不是必需的，但是如果您使用需要在值更改或任何其他繁重操作上重新初始化的插件，那么检查您是否真的需要这样做可能是有益的。

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

1 个答案: