javascript - 带有backbone.js的模板

标签 javascript backbone.js

有一个带有 backbone.js 的简单模板 -

jsTemplateBackbone.html

<html>
<head>
    <script src="jquery-2.1.0.min.js"></script>
    <script src="json2.min.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
    <!--Order is important !!!--> 
</head>
<body>
        <script type="text/template" id="item-container">
            <li><%= value %></li>
        </script>
        <script src="jsBackboneHomeView.js"></script>
</body>
</html>

jsBackboneHomeView.js

//Model
Wine = Backbone.Model.extend();

// Collection
Wines = Backbone.Collection.extend({
    Model: Wine,
    url: "#"
});
// Collection object
wines = new Wines([
    { name: "Robert Mondovi" },
    { name: "CakeBread" }
]);


// List
ListView = Backbone.View.extend({
    tagName: 'ul',
    initialize: function () {
        // grabing the html template
        this.template = _.template($('#item-container').html());
    },
    render: function () {
        var el = this.$el, template = this.template;
        el.empty();

        wines.each(function (wine) {
            el.append(template(wine.toJSON()));
        });

        return this;
    }
});

// View
HomeView = Backbone.View.extend({
    el: 'body',
    initialize: function () {
        this.render();
    },
    render: function () {
        this.$el.empty();
        this.$el.append("<h1>My App</h1>");
        listView = new ListView();
        // append two <li> on <ul> and return it 
        this.$el.append(this.listView.render().el);

        return this;
    }
});
// View instance
wineApp = new HomeView();

当我执行它时,它给出了一个错误 -

Uncaught TypeError: Cannot call method 'replace' of undefined -  underscore.js:1236
line 1236 -  text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {

这里出了什么问题?

(代码取自this教程。)

最佳答案

模型中的属性称为name,而模板中的属性称为value,因此无法替换。尝试:

<li><%= name %></li>

在您的模板中。

关于javascript - 带有backbone.js的模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21878291/

相关文章:

javascript - Cakephp 多个表单 1 提交按钮

javascript - 如何将 Jquery-file-upload 与backbone.js 和 require.js 一起使用

javascript - .bind ('all'、 'update' 上的 Backbone 奇怪的 TypeError 错误?

javascript - 如何只允许在输入字段开头输入文本,并始终附加文本

javascript - 如何使用 ajax/javascript 获取 json 文件的创建日期?

javascript - Bootstrap 模态在面板点击时移动到顶部

javascript - 表达JS/jestJS : How to split get() function to write simple jest unit test?

javascript - 我想模块化 Backbone.js View ,以便 Javascript 和模板位于同一文件中

javascript - 两个 Backbone.Router 定义之间的差异

javascript - Backbone 集合 url 未定义