1

jQueryテンプレートを使用したいと思います。一見すると、{{tmpl}}タグが適切な方法のように見えますが、テンプレートを作成するときに追加の手順を実行する必要があり、その方法がわかりません。

データオブジェクトのプロパティに関連するデータ型定義があります。以下の例では、「movie」はテキストフィールドであり、「released」は数値フィールドです。すべてのテキストフィールドは特定のテンプレートを使用するため、すべての数値フィールドを使用します。これらのネストされたテンプレートは、それらが使用されているコンテキスト（ここでは映画）について何も知りません。したがって、そこで使用されるタグは常に${value}だけです。代わりに、「外部」テンプレートは、映画がどのように見えるかを認識しています。そのタグ（映画およびリリース済み）は、「内部」データ型関連のテンプレートに置き換えられます。追加の手順は、外部テンプレートが実行される前に${value}を置き換えることです。

私が思いつくことができるのはこれだけです：

//the template used for all string-fields
var templForStrings = "<b>${value}</b>";
//the template used for all numeric fields
var templForNum = "<i>${value}</i>";

//data of a movie
var data = {};
data.movie = "Cowboys and Aliens"; //a string field
data.released = 2011; //a numeric field

//the template to show a movie
var templForMovies = "<div>{{html movie}} ({{html released}})</div>";

//normally a loop over the fields here
var field = {value: data.movie};
data.movie = $.tmpl(templForStrings, field).fullhtml();

field.value = data.released;
data.released = $.tmpl(templForNum, field).fullhtml();

//now the movie template
$.tmpl(templForMovies, data).appendTo("body");

もちろん、このシナリオは単純化されています。datatype-templatesはそれよりもはるかに複雑です。データは何でもかまいません。$ {value}はここでは2つの異なる意味を持っているため、プラグインによって提供されるネストされたテンプレートの使用方法がわかりません。しかし、私のコード（fullhtml-Pluginも必要です。このようなテンプレートがあれば本当にいいでしょう）よりもエレガントで高速な方法があると確信しています。

<div>${movie} (${released})</div>

これらはエンドユーザーによっても作成可能であり、可能な限り単純にする必要があるためです。

4

1 に答える 1

1

おそらく、ヘルパー関数を使用してこれを行うことができます。

html:

<div id="container"></div>

<script id="tmplObject" type="text/x-jquery-tmpl">
{{each $data}}
    {{html Helper($item, $index)}}
{{/each}}
</script>

<script id="tmplNumber" type="text/x-jquery-tmpl">
number: <b>${Value}</b><br/>
</script>

<script id="tmplString" type="text/x-jquery-tmpl">
string: <i>${Value}</i><br/>
</script>

脚本：

<script type="text/javascript">

    Helper = function($item, $index) {
        var value = $item.data[$index];
        var type = (typeof value.Value).toLowerCase();
        var tmplName = "#tmplObject";

        if (type == 'number') {
            tmplName = "#tmplNumber";
        }
        else if (type == 'string') {
            tmplName = "#tmplString";
        }

        var $node = $('<div>').append($(tmplName).tmpl(value)).remove();
        return $node.html();
    };


    $(function() {
        var data = {
            Name: { Value: "John" },
            Age: { Value: 999 },
            Type: { Value: {
                Id: { Value: 123 },
                TypeName: { Value: 'Human' }
            }
            }
        };

        $('#tmplObject').tmpl(data).appendTo('#container');
    });
</script>
于 2011-01-20T23:50:46.033 に答える