Backbone.js 下划线/主干线：'未定义'；_Backbone.js_Underscore.js

Backbone.js 下划线/主干线：'未定义'；

backbone.js

Backbone.js 下划线/主干线：'未定义'；,backbone.js,underscore.js,Backbone.js,Underscore.js,这是我的密码： <!DOCTYPE html> <html> <head> <title>Matt's Template</title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normaliz

这是我的密码：

<!DOCTYPE html>
<html>
    <head>
        <title>Matt's Template</title>

        <!-- Stylesheets -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
        <link rel="stylesheet" href="../stylesheets/general.css" type="text/css" />

        <style type="text/css">
            .dragndrop {
                position:relative;
                margin:30px auto;
                border:4px dashed #000;
                border-radius: 25px;
                padding:50px;
                text-align: center;
            }
            table{
                width:100%;
            }
            tr{
                width:100%;
            }
            td, th {
                padding:10px;
                border:1px solid #000;
                width:50%;
                text-align: center;
            }
        </style>
    </head>
    <body>
            <section class="container">

                <!--<form action="/file-upload" method="post" enctype="multipart/form-data">
                  <input type="file" name="file" />
                  <input type="submit" />
                </form>-->      
                <form action="/file-upload" class="dropzone dragndrop" id="my-awesome-dropzone"></form>     

                <section id="skills">

                </section>


                <script type="text/template" id="skillsTemplate">
                    <section>
                        <table>
                            <tr>
                                <th>Skill</th>
                                <th>Value</th>
                            </tr>
                            <% _.each(items, function(item){ %>
                                    <tr>
                                        <td><%= item.get('name') %></td>
                                        <td><%= item.get('value') %></td>
                                    </tr>
                            <% }); %>
                            <tr>
                                <td><button id="newSkill">New</button></td>
                            </tr>
                        </table>
                    </section>
                </script>
            </section>

        <!-- Javascript Libraries -->
        <script type="text/javascript" src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>

        <script type="text/javascript">
             SkillsView = Backbone.View.extend({
                render : function(){
                    var template = _.template($('#skillsTemplate').html(), [{ name:"Linux", value:"Test"}]);

                    this.$el.html(template);
                }
            });

             var skillsview = new SkillsView({el : $('#skills') });

             skillsview.render();


        </script>
        <!-- My Javscript -->
    </body>
</html>


马特模板
dragndrop先生{
位置：相对位置；
保证金：30像素自动；
边框：4px虚线#000；
边界半径：25px；
填充：50px；
文本对齐：居中；
}
桌子{
宽度：100%；
}
tr{
宽度：100%；
}
td，th{
填充：10px；
边框：1px实心#000；
宽度：50%；
文本对齐：居中；
}
技巧
价值
新的
SkillsView=Backbone.View.extend({
render:function（）{
var template=35;.template（$（'skillsTemplate'）.html（），[{name:“Linux”，value:“Test”}]）；
这个.$el.html（模板）；
}
});
var skillsview=新的skillsview（{el:$（'#skills'）}）；
skillsview.render（）；

唯一重要的部分是下划线模板不起作用。这是说：

\u行上的“\u”。每个（项，函数（项）

都未定义。为什么会发生这种情况？我尝试将下划线脚本include移到页面顶部，但没有任何帮助。

我无法重现“

未定义”问题，但我确实发现了您可能遇到的另一个问题：您正在将项引用为变量

items

，但您从未告诉

。

您希望数据位于items
中。请使用对象文字作为数据：
_.template($('#skillsTemplate').html(), {
    items: [{ name:"Linux", value:"Test" }]
})

（另外，当数据是普通对象而不是下划线模型时，您使用的是item.get（'name'）
，但我假设这只是简化了问题代码后原始代码的一部分。）
哦，我想我意识到了它为什么会这样做……所以我使用的是带NodeJS的ExpressJS，而express使用的是EJS渲染引擎。所以我想当我使用时，它会认为我在访问来自嵌入式javascript的数据。你认为是这样吗？它在服务器端而不是在服务器端出错client@MattHintzke：是的，听起来很有道理。看看你，你是老板，这就是原因