javascript - CanJS/JavascriptMVC：如何将视图模板存储在变量中

Question

是否可以在 javascript 变量中定义视图模板，而不是脚本标签或文件？

像这样的东西：

var template = "< h1 ><%= title %> < / h1 >"; 
var rendered = can.view.render(template, data);

Answer 1

好的，经过大量研究，因为它没有写在文档中，我找到了如何去做。诀窍是您必须先使用 id 注册模板。如果您使用脚本标签或 url 来查找模板，则此步骤由 canJS 自动完成。

所以，如果你想渲染一个模板，存储在一个变量中，你必须做这样的事情：

var template = "< h1 ><%= title %> < / h1 >"; 
can.view.ejs('my-view-id', template);​​​​​​​
var rendered = can.view.render('my-view-id', data);

现在您在rendered.

Answer 2

看看 jquery utils string format plugin。有一个示例显示从定义为字符串的模板渲染 html。

创建模板：

$.tpl('tweet', [
    '<div id="tweet-{id:s}" class="tweet">',
        '<div class="tweet-body"><b>@{from:s}</b>: {body:s}',
            '(<a href="{href:s}" class="tweet-date">',
                '<abbr title="{timestamp:s}">{timesince:s}</abbr>',
            '</a>)',
        '</div>',
    '</div>'
]);

渲染：

$.getJSON('/tweets/username/', function(resp, s){
    $.each(resp.tweets, function(idx, tweet) {
        $.tpl('tweet', {
            id: tweet.id,
            body: tweet.body,
            from: tweet.screen_name,
            timestamp: tweet.pub_time,
            timesince: $.timeago(tweet.pub_time)
        }).appendTo('#tweet-list');
    });
});