Question

我正在进行$ .getJson调用，我希望能够重用它来进行不同的ui渲染。我想使用GetUserRoles（userName）方法来渲染具有2个不同调用的2 ui控件。第一个调用是填充下拉列表。现在我想再次调用将在同一页面上绘制UL列表的方法。我如何使用相同的方法。

 function GetUserRoles(userName) {
            var param = { userName: userName };
            $.getJSON(userRoleController, param, function (data) { GetUserRolesSuccess(data, userName); });
        }

        function GetUserRolesSuccess(data,userName) {
            $("#userdetails #roles").html("");
            if (data.length != 0) {
                var roles = "<table class='rolesTable' cellpadding='0' cellspacing='0' border='0'>";
                for (var i = 0; i <= data.length - 1; i++) {
                    if (data[i] != undefined) roles += "<tr><td>" + data[i] + "</td><td><a href='#' onclick=\"RemoveUserFromRole('" + data[i] + "','" + userName + "');\">Remove</a></td></tr>";
                }
                roles += "</table>";
            }
            else {
                roles = "<p class='norolesavailable'>No roles assigned to user.</p>";
            }

            $("#userdetails #roles").html(roles); 
        }

Answer 1

向GetUserRoles和GetUserRolesSuccess添加一个参数，指示要呈现的控件类型，因此方法签名看起来像GetUserRoles(userName, controlToRender)和GetUserRolesSuccess(data, userName, controlToRender)。将GetUserRoles修改为：

 function GetUserRoles(userName, controlToRender) {
     var param = { userName: userName };
     $.getJSON(userRoleController, param, function (data) { GetUserRolesSuccess(data, userName, controlToRender); });
 }

最后添加一个基于新参数呈现控件的条件，例如：

function GetUserRolesSuccess(data, userName, controlToRender) {
    if(controlToRender == 'ul') {
        // make a ul
    } else if(controlToRender == 'whatever') {
        // make a whatever
    }
}

现在只需调用GetUserRoles传递新参数，例如：

GetUserRoles('Jeff123', 'ul');
GetUserRoles('Jeff123', 'foo');

$ .getJson重用方法，用于渲染2个不同的控件

1 个答案: