Question

我想使用jQuery Templates。乍一看{{tmpl}}标签似乎是要走的路，但我需要在模板时做一个额外的步骤，我无法弄清楚如何做到这一点。

有一个数据类型定义被赋予数据对象的属性。在下面的示例中，“movie”是一个文本字段，“已发布”是一个数字字段。 Alle文本字段使用特定模板，所有数字字段也是如此。那些嵌套模板对它们所使用的上下文（这里是电影）一无所知。所以那里使用的标签总是只有$ {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");

当然这种情况很简单。数据类型模板比这复杂得多。数据可以是任何东西。由于$ {value}在这里意味着两个不同的东西，我不知道如何使用插件提供的嵌套模板。但我确信有一种比我的代码更优雅，更快捷的方式（甚至需要fullhtml-Plugin。拥有这样的模板真的很棒

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

因为这些也可以由最终用户创建，并且应该尽可能简单。

Answer 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>

嵌套模板问题

1 个答案: