Question

我尝试使用下划线模板功能渲染一些HTML。问题是当我在我的机器上本地加载脚本时，我得到Uncaught ReferenceError: data is not defined。

它似乎适用于jsfiddle，但不适用于我的环境，我不知道为什么。这是working js fiddle。

这是我的代码：

define([
    'jquery',
    'backbone',
    'underscore',
    'moment',
    'bootstrap-modal',
    'domReady!'
], function (
    $,
    Backbone,
    _,
    moment
) {

'use strict';

/**
 * Represents a booking modal view
 */
return Backbone.View.extend({

    defaults: {

        modalHeadingHtml: '<div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title"><%= data.title %></h4> </div>',
        modalBodyHtml: null,
        modalFooterHtml: null

    },

    template: _.template('<div class="modal-dialog"><div class="modal-content"><%= data.content %></div></div>'),

    className: 'wl-car-book-modal modal wl-modal fade',

    /**
     * Initializes booking modal view.
     */
    initialize: function (options) {

        this.options = _.extend({}, this.defaults, this.options);

        $('body').append(this.render().el);

        this.$el.modal()

        var data = {data: { title: 'fooo'}};
        var tpl = _.template(this.options.modalHeadingHtml);

        this.$('.modal-content').append(tpl(data));

        this.open();

    },

    render: function() {


        var wrapperHtml = this.template({data: {content: 'test'}});

        this.$el.html(wrapperHtml);

        return this;

    },

    open: function() {
        this.$el.modal('show');
    },

    close: function() {
        this.$el.modal('hide');
    }

});
});

是的，存在一些差异，但主要是它与初始化函数中明显的未定义变量有关。

非常感谢任何帮助，谢谢。

Answer 1

我的猜测是这个中的modal（）。$ el.modal（）是未定义的东西。检查你的define（[]）块。什么是'bootstrap-modal'的完整路径？您在“来源”标签中的Chrome开发工具中看到了什么？是否需要为'bootstrap-modal'加载bootstrap.js？它可能在jsfiddle中工作，因为modal（）是由包含bootstrap.js的其他方法定义的。这个。$ el.modal（）也可以在行尾使用分号，但这不是它不起作用的原因。

未使用的ReferenceError使用带有主干的下划线模板

1 个答案: