从模块模式开始

Question

我试图从一开始就在我的 JS 代码中使用模块模式，但我在理解如何执行这种代码设计时遇到了问题。

这是一个简单的事件：

$('#docTable').on('dblclick', 'tbody tr.line', function (event) {
    $('#modal1').modal({ keyboard: false, backdrop: "static", dismiss: "modal" });
    $('#modal1').modal('show');

});

我创建了几个 JS 文件。 View.js:

var task = window.task || {};
task.View = (function () {

function View(rootElement) {
    var dom = {
        table: $('#docTable'),
        },
        callbacks = {
            onsubmit: undefined
        };

    return {

    };
}

return View;
}());

和Controller.js：

$(document).on('ready', function () {

var View = task.View(document);    

});

但我不知道如何继续并捕获 dblclick 事件。

有人能帮帮我吗？

提前致谢。

Answer 1

您可以创建 'class' 视图并将事件绑定添加到其原型。之后，您可以在多个 table 上使用它。如果你想访问 table 中的元素，你可以向它们添加类并在 defineDOM 方法中找到它们：

View.js

var task = window.task || {};
task.View = function (table) {
    this.$table = $(table);
    this.init();
};

task.View.prototype ={
    init: function () {
        this.defineDOM();
        this.bindEvents();
    },

    defineDOM: function() {
        // Search for DOM elements in context of table element
        this.$button = $('.docButton', this.$table);
        this.$links = $('.docLinks', this.$table);
    },

    bindEvents: function () {
        this.$table.on('dblclick', 'tbody tr.line', this.onDblClick.bind(this))
    },

    onDblClick: function () {
        $('#modal1').modal({ keyboard: false, backdrop: "static", dismiss: "modal" });
        $('#modal1').modal('show');
    }
}

用法

$(document).on('ready', function () {
    new task.View('#docTable');
});

从模块模式开始

Starting with module pattern

javascript

jquery

module-pattern

View.js

用法