如何将回调函数传递给已编译的 Jade 模板而不在 javascript 中全局声明它

Question

我创建了一个背景网格 table 来管理用户。 table 的功能之一是允许管理员更改密码。这是通过向启动模式更改密码对话框的背景网格 table 添加按钮单元格列来实现的。输入密码并单击更改后，新密码将传回背景网格单元格并插入回调中的 backbone 模型。

问题是传递回调，因为更改密码对话框是一个编译好的客户端Jade模板，所以我无法在呈现html时在选项中传递一个函数，我只能传递一个函数名。

这是我目前所拥有的（仅显示 Jade 和 Backgrid PasswordCell 定义）。

客户端 Jade 模板：

#user-passwd-dialog.modal
.modal-dialog
    .modal-content
        .modal-header.bg-warning
            button.close(type="button" data-dismiss="modal" aria-label="Close")
                span(aria-hidden="true") &times;
            h4.modal-title
                span.glyphicon.glyphicon-log-in
                span  Set User Password
        .modal-body
            if message.length > 0
                // show any messages that come back with authentication
                .alert.alert-info #{message}

            // LOGIN FORM
            form
                .form-group
                    label(for="user-password") Password
                    input.form-control#user-password(type="password" placeholder="New Password")
                .form-group
                    label(for="user-confirm") Confirm Password
                    input.form-control#user-confirm(type="password" disabled="disabled" placeholder="Confirm Password")

        .modal-footer
            button.btn.btn-warning.btn-lg#user-change-password(type="button" disabled="disabled") Change Password
            button.btn.btn-warning.btn-lg(type="button" data-dismiss='modal') Cancel

script(type="text/javascript").
    function checkMatch() {
        var password = $("#user-password").val();
        var confirmPassword = $("#user-confirm").val();

        if (password !== confirmPassword) {
            $("#user-confirm").removeClass("alert alert-success").addClass("alert alert-danger");
            $("#user-change-password").prop("disabled", true);
            return false;
        } else {
            $("#user-confirm").removeClass("alert alert-danger").addClass("alert alert-success");
            $("#user-change-password").prop("disabled", false);
            return true;
        }
    }
    $("#user-password").keyup(function() {
         var password = $("#user-password").val();
         if (password.length >= #{ minLen }) {
             $("#user-confirm").prop("disabled", false);
            checkMatch();
        } else { 
            $("#user-confirm").prop("disabled", true);
        }
    });
    $("#user-confirm").keyup(function() {
        var password = $("#user-password").val();
        if (password.length >= #{ minLen }) {
            checkMatch();
        }
    });
    $("#user-change-password").click(function() {
        var password = $("#user-password").val();
        #{result}(password);
        $('#user-passwd-dialog').modal('hide');
    });

Backgrid cell定义为（编译后的Jade模板为Templates.set_password(opts)）：

    var PasswordCell = Backgrid.Cell.extend({
    className: "button-cell",
    template: function () {
        return '<button class="btn btn-sm btn-warning"><span class="glyphicon glyphicon-lock"></span></button>';
    },
    events: {
        "click": "setPassword"
    },
    setPassword: function (e) {
        e.preventDefault();
        // XXX binding to global variable so modal can set password
        // must be more elegant way to do this
        mycallbackwiththelongname = (function(password) {
            this.model.set({ password : password});
        }).bind(this);
        var opts = {
            message:"The password must be at least 8 characters long",
            minLen: 8,
            result: "mycallbackwiththelongname"
        };
        $("#dialog-wrapper").html(Templates.set_password(opts));
        $("#user-passwd-dialog").modal({ keyboard: true });
    },
    render: function () {
        this.$el.html(this.template());
        this.delegateEvents();
        return this;
    }
});

问题在代码中：是否有更优雅的方式来传递回调，从而不需要全局函数。本地函数会更好，但我不确定如何指定名称。

我有一个使用全局函数的简化 jsfiddle 工作。

Answer 1

我找到了一种使用 PasswordCell 'click' 处理程序本地函数的方法，方法是使用 jQuery 数据 API 传递它。我将回调函数附加到父元素，然后将父元素的名称传递给呈现 Jade 模板的函数。

在 PasswordCell 中将 setPasswd 更改为：

    setPassword: function (e) {
        e.preventDefault();
        var passwordResult = (function(password) {
            this.model.set({ password : password});
        }).bind(this);
        var opts = {
            name: "change-password-modal",
            message:"The password must be at least 8 characters long",
            minLen: 8,
            parent: "dialog-wrapper"
        };
        $("#dialog-wrapper").html(Templates.set_password(opts));
        $("#dialog-wrapper").data("onChange", passwordResult);
        $("#user-passwd-dialog").modal({ keyboard: true });
    },

在 Jade 模板中更改按钮单击事件处理程序：

$("#user-change-password").click(function() {
    var password = $("#user-password").val();
    $("##{ parent }").data("onChange")(password);
    $('#user-passwd-dialog').modal('hide');
});

jsfiddle已更新。

如何将回调函数传递给已编译的 Jade 模板而不在 javascript 中全局声明它

How to pass a callback function to a compiled Jade template without declaring it globally in javascript

javascript

backbone.js

twitter-bootstrap

backgrid

pug