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 stringformatpluginを見てください。文字列として定義されたテンプレートからの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');
    });
});