【问题标题】:Underscore.js: Uncaught ReferenceError: data is not defined [duplicate]Underscore.js:未捕获的 ReferenceError:未定义数据 [重复]
【发布时间】:2014-11-14 19:28:04
【问题描述】:

我正在尝试使用 Underscore.js forEach 方法将对象列表加载到模板中:

HTML模板代码:

<script type="text/template" id="element">
    <% _.each(data, function (element) { %>
        <div class="col-xs-12 col-sm-12 col-md-4" id="inner-element">
            <div class="thumbnail">
                <img class="img-responsive" src="../../../img/<%= element.img %>" alt="...">
                <div class="caption">
                    <h3 class="menu-food-name"><%= element.name %></h3>
                    <p class="menu-food-description"><%= element.description %></p>
                    <p class="menu-food-price text-right"><span class="label label-info" role="button"><%= element.price %></span></p>
                </div>
            </div>
        </div>
    <% }); %>
</script>

Javascript:

var elementTemplate = _.template($('#element').html(), {data: item});
that.$el.append(elementTemplate);

“item”之前被定义为一个对象数组,包含三个元素,我想在模板中显示属性(名称、描述、价格和img)(如console.log(item)所示):

Object {0: Object, 1: Object, 2: Object}
    0: Object
        description: "grilled portobello and balsamic"
        img: ""
        name: "fungi grigliati"
        price: "7.95"
        __proto__: Object
    1: Object
        description: "baked clams"
        img: ""
        name: "vongole oreganate"
        price: "7.95"
        __proto__: Object
    2: Object
        description: "mussels marinara sauce"
        img: ""
        name: "padellata di cozze"
        price: "13.95"
        __proto__: Object
__proto__: Object

当我尝试运行此代码时,我在开发控制台中不断收到“未捕获的 ReferenceError:数据未定义”错误。我想我可能忽略了 Underscore forEach 方法背后的功能。我假设我传递的数据可能格式不正确。任何关于这方面的想法/帮助都会很棒。

【问题讨论】:

    标签: javascript jquery backbone.js underscore.js underscore.js-templating


    【解决方案1】:

    错误就在那里,data 未定义。这与_.each无关;相反,您错误地使用了_.template

    第二个参数是templateSettings,而不是数据。你将数据传递给_.template返回的函数。

    // create template function
    var elementTemplate = _.template($('#element').html());
    // render the template with the given data
    that.$el.append(elementTemplate({data: item}));
    

    【讨论】:

    • 我学习了很多教程,所有教程都在教如何将数据传递给 _.template 方法。那没有用。但是,正如您所说,将数据放入返回的函数中效果很好。非常感谢。
    • @FábioGomideNolasco:下划线在 1.7.0 上更改了 _.template() 的定义。旧版本接受_.template(templateString, [data], [settings]),而最新版本仅接受_.template(templateString, [settings])
    • 如果你是one-liners的粉丝,你可以这样做:var htmlText= _.template($('#element').html())({data: item});
    • @SolomonAfiemo 我不是;不要那样做,它更难阅读。
    • @SolomonAfiemo:另外,_.template($('#el').html()).call(null, {data: items}); 看起来更具可读性,因为您没有紧跟在右括号之后的左括号。
    猜你喜欢
    • 2012-09-07
    • 2012-03-03
    • 1970-01-01
    • 2021-01-04
    • 2023-01-16
    • 2016-08-10
    • 2023-03-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多