1

私の会社はUIデザインを別の会社にアウトソーシングしています。その会社は私たちにhtmlテンプレートを提供してくれました。現在、データを表示する方法は、jquery ajaxからWebサービスを呼び出し、Webサービスがデータアクセスレイヤーからのオブジェクトのコレクション（顧客オブジェクトのコレクションなど）を要求することです。その後、コレクションはjson文字列に変換され、結果としてJqueryAjaxに返されます。次に、Jqueryはjson文字列から値を取得し、それに応じてhtml文字列に置き換えてdivに追加します。そのhtml文字列は外部委託会社によって提供されたテンプレートです。以下はJqueryの例です。

function ShowAllTransactions() {
try
{

    var isBest = "false";

    $.ajax({
        type: "POST",
        url: "Transaction.asmx/GetTransactionRecords",
        data: "{'categoryID':'" + categores +"' }",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            GetTransactions(msg);
        }
    }).done(initProductInfo);
    }
catch (ex) {
    alert(ex);
}
}

var GetTransactions = function (msg) {
    var p = $.parseJSON(msg.d);
    var str = '';
 for (var i = 0; i < p.length; i++) {
        var OrderCreateDateTime = p[i].OrderCreateDateTime;
        str += "<ul class=\"transitem\">";
        str += "<li class=\"itemdate\">" + OrderCreateDateTime + "  </li> ";
        str += "</ul> <div class=\"clear\"></div>";
       }
    str += "<div class=\"clear\"></div> <div class=\"endline\"></div>";

    $("#records").empty().append(str);
}

通常、html文字列は非常に長く、保守とトラブルシューティングが困難です。これを解決するためのより良い方法はありますか？DALにはEntityFrameworkを使用しています。ありがとう。

4

1 に答える 1

1

これは の使用に関する優れた記事のようですjquery templates。とはいえ、使ったことがないので動作は不明。私も同様のアプローチを使用していますが、テンプレートは実際には HTML と Javascript が混在しています。テンプレートはT4 テンプレートと似ています。

これは、テンプレートを解析するコードです。

$.fn.parseTemplate = function (data) {
    //alert(JSON.stringify(data));
    var str = (this).html();
    //alert(str);
    var _tmplCache = {}
    var err = "";
    try {
        var func = _tmplCache[str];
        if (!func) {
            var strFunc =
            "var p=[],print=function(){p.push.apply(p,arguments);};" +
                        "with(obj){p.push('" +
            str.replace(/[\r\t\n]/g, " ")
               .replace(/'(?=[^\$]*\$>)/g, "\t")
               .split("'").join("\\'")
               .split("\t").join("'")
               .replace(/<\$=(.+?)\$>/g, "',$1,'")
               .split("<$").join("');")
               .split("$>").join("p.push('")
               + "');}return p.join('');";

            //alert(strFunc);
            //console.log(strFunc);
            func = new Function("obj", strFunc);
            _tmplCache[str] = func;
        }
        return func(data);
    } catch (e) { err = e.message; }
    return "ERROR: " + err.toString();
}

これはテンプレートの例です (スクリプトは、タイプのためにブラウザーによって無視されます)。

<script id="MyTemplate" type="text/template">
<$
for(var i = 0; i < obj.length; i++) {
$>
<div><$= obj[i] $></div>
<$
}
$>
</script>

これが私がテンプレートを使用する方法です：

<script type="text/javascript">
function loadDataIntoHtml() {
  var data = ["Javascript", "HTML", "Templates"];
  var html = $("#MyTemplate").parseTemplate(data);
  $("#divContainer").html(html);
}
</script>

divContainer任意の html 要素 (div、span など) を指定できます。私は通常、テンプレートを別のファイルに保存し、サーバーにロードします。

<script runat="server" type="text/C#">
var templateContent = System.IO.File.ReadAllText(Server.MapPath("~/Templates/MyTemplate.htm"));
</script>
...

<script id="MyTemplate" type="text/template">
<%= templateContent %>
</script>

この方法でテンプレートを編集するのは非常に簡単です。完璧ではありませんが、HTML の長い文字列のデバッグについて心配する必要はありません。

于 2013-02-28T07:02:48.580 に答える