5

テンプレートにHoganjsを使用しており、モジュールローダーとしてjsが必要です。jquery js、hogan jsなどの必要なライブラリを用意し、jsを配置する必要があります。

index.htmlは以下のとおりです

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>RequireJS - AMD</title>
    <script data-main="main" src="require.js"></script>

    <!-- Template -->
    <script id="tmpl-heading" type="text">
        <h3>{{heading}}</h3>
        <p>{{article}}</p>
    </script>
</head>
<body>
</head>
<body>
    <div id="heading"></div>
</body>
</html>

メインのjsは以下のとおりです。

require(['jquery', 'hogan'], function($, hogan){
        var headingData = {
            heading: "Some heading goes here",
            article: "<a href='http://www.lipsum.com'>Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec varius, velit pulvinar sollicitudin auctor, nibh nibh mattis diam, vel elementum tortor urna ac diam. Sed tellus neque, gravida nec facilisis et, pellentesque quis enim."
        };

        var hSource = $("#tmpl-heading").html();

        var hTemplate = Hogan.compile(hSource);

        var hData = hTemplate.render(headingData);

        $("#heading").html(hData);

        //$("#heading").html(headingData.article);
});

私の問題：ブラウザでは、アンカータグ内のテキストがリンクとしてレンダリングされず、テキストとしてレンダリングされません。

ただし、ホーガンなどを使わないと、期待通りの結果になります。リンクは正しくレンダリングされます。

require(['jquery', 'hogan'], function($, hogan){
        var headingData = {
            heading: "Some heading goes here",
            article: "<a href='http://www.lipsum.com'>Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec varius, velit pulvinar sollicitudin auctor, nibh nibh mattis diam, vel elementum tortor urna ac diam. Sed tellus neque, gravida nec facilisis et, pellentesque quis enim."
        };

       $("#heading").html(headingData.article);
});

ホーガンを使用している間に必要な変更を行う必要があることを教えてください（私はいくつかの重要なビットを見逃したに違いありませんが、理解できません）。フロントエンドのアンカーをリンクとしてレンダリングできるはずです。前もって感謝します。

4

1 に答える 1