在backbone.js中使用jquery移动对话框

Question

我需要在项目中添加模态对话框。所以情况是我渲染一个登录页面。登录页面将包含两个输入文本字段和两个按钮（登录和连接）现在我需要的是每当我点击连接（按钮）我需要显示一个模态对话框，它将有一个输入文本字段和一个先前输入的列表数据。这是我到目前为止所做的，但它不起作用。

connection.tpl.html 
<div id="connectionContainer" data-role="page" style="width:200px; height: 200px;">
<input id="serviceUrl" class="user-input"/>

loginview

var LoginView = Backbone.View.extend({
    events:{
    "click .login-btn" : "Login",
    "click .connection-btn" : "Connect"
    },

    initialize: function(){
    },

    Login: function(){
        Const.USERNAME = $("#username").val();
        Const.PASSWORD = $("#password").val();
        if(!Const.USERNAME || !Const.PASSWORD)
        {
            alert("Invalid Username/Password!");
            $("input").val("");
        }else{

            var auth = EncodeAuth(Const.USERNAME,Const.PASSWORD);

            var sendAuthorization = function (xhr) {
              xhr.setRequestHeader('Authorization', auth)
            };

            this.model.save(this.model, {
                beforeSend : sendAuthorization,
                success: function(model,result){
                    if(result.ErrorMessage === null)
                    {
                        alert(JSON.stringify(result.Message));
                        $("input").val("");
                    }
                    else
                    {
                        alert(JSON.stringify(result.ErrorMessage));
                        $("input").val("");
                    }
                },
                error: function(model,result){
                    alert("Remote server returned an error. Not Found");
                    $("input").val("");
                }
            });
        }
    },
    Connect:function(){
        this.connectionview = new ConnectionView({ el: $("#connectionContainer") });
        $("#wrapper").html( _.template( ConnectionTemplate ) );
    }