Question

这是我的代码：

<!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>

唯一重要的部分是下划线模板不起作用。这句话说：_.each(items, function(item)上的'_'是未定义的。为什么会这样？我尝试将下划线脚本包括在页面顶部，但没有帮助。

Answer 1

我无法重现“_未定义”问题，但我确实发现了您可能遇到的另一个问题：您将这些项目引用为变量items，但是您从未告诉_.template您希望数据位于items。使用对象文字作为数据：

_.template($('#skillsTemplate').html(), {
    items: [{ name:"Linux", value:"Test" }]
})

（另外，当数据是普通对象而不是Underscore模型时，你正在使用item.get('name')，但我认为在简化问题代码后，这只是原始代码中的残余。）

下划线/骨干：'_未定义'

1 个答案: