如何將回調函數傳遞給已編譯的Jade模板而不用在javascript中全局聲明它

Question

我創建了一個Backgrid表來管理用戶。該表的功能之一是允許管理員更改密碼。這是通過在啓動模式更改密碼對話框的表格中添加按鈕單元格列來實現的。在輸入密碼並單擊更改後，新密碼將被傳回到單色框並插入到回調中的骨幹模型中。

問題是傳遞迴調，因爲更改密碼對話框是一個已編譯的客戶端Jade模板，所以我無法在呈現html時在選項中傳遞函數，我只能傳遞函數名稱。

這是我到目前爲止（僅顯示Jade和Backgrid PasswordCell定義）。

客戶機端玉模板：

#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") × 
      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小區被定義爲（編譯玉模板是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

我想通過使用jQuery數據API傳遞它來使用PasswordCell'click'處理程序的局部函數。我將回調函數附加到父元素，然後將父元素的名稱傳遞給呈現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 }); 
    }, 

在玉模板更改按鈕單擊事件處理程序：

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

的jsfiddle已更新。