Question

我正在尝试使用脚本标记将文件从文件加载到HTML文件中。我想在UnderscoreJS中使用它作为模板 - 但我无法加载文件：

//main.js

    this.template = _.template($("#add-question").html());
            console.log("testing");
            console.log(this.template({
                question: "How are you doing?",
                yesOrNo: true
            }))

//console output:

    testing      Main.ts:37
                 Main.ts:38


    //main html file:

    <html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <head>
        <script type="text/template" id="add-question" src="client/add-new-question.html"></script>
    </head>
    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" type="text/javascript"></script>
    <script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
    <script data-main="main.js" src="build/require.js"></script>

    </body>
    </html>

// client / add-new-question.html

    <form id="testForm">
        <span>"<% question %></span>
        <input id="questionInput" type="text">
        <span>"<% yesOrNo %></span>
        <input id="typeInput" type="checkbox">
    </form>

更新这是更新的HTML，其中我尝试通过正文中的脚本标记加载html。仍然无法正常工作。这是使用UnderscoreJS渲染模板时预期完成的方式。我希望能够使用requireJS加载模板，但使用underscoreJS模板函数进行渲染。

<body>
<script type="text/template" id="add-question">
    <form id="testForm">
        <span>"<%= question %></span>
        <input id="questionInput" type="text">
        <span>"<%= yesOrNo %></span>
        <input id="typeInput" type="checkbox">
    </form>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>

Answer 1

您必须使用<%=来输出变量而不是<%。

看起来你正在使用requirejs 所以你也可以使用tpl扩展并将你的下划线模板存储在.tpl文件中：

https://github.com/ZeeAgency/requirejs-tpl

define(['tpl!client/add-new-question.html'], function(tpl) {

        console.log(tpl({
            question: "How are you doing?",
            yesOrNo: true
        }));

});

链接：
How to use underscore.js as a template engine? 和underscore.js

在HTML中加载Underscore模板

1 个答案: