Question

如何添加标签名称为age的文本框并使用backbone.js在模板中查看？

<label> Age</label>
<input type = "text" name = "age" value="12"/>

我希望将其添加为模型的属性并在模板中查看它。有人可以帮忙吗？我知道backbone.js的基础知识。

Answer 1

不确定你想要什么，但这里是基本的例子：

var App = {};

App.Person = Backbone.Model.extend({});
App.View = Backbone.View.extend({
    el: "#form",
    render: function() {
        var html = _.template($('#form-tpl').html(), this.model.toJSON());
        this.$el.html(html);
    }
});

$(function() {
    var person = new App.Person({
        name: 'Thomas',
        age: 37
    }),
    app = new App.View({model: person});
    app.render();
});

HTML：

<script type="text/template" id="form-tpl">
    <label>Age:</label>
    <input type="text" name="age" value="<%= age %>">
</script>
<div id="form"></div>

http://jsfiddle.net/CX3ud/

还有大量的教程可用。祝你好运！

Answer 2

Backbone没有内置模板，这意味着您首先必须选择模板系统。那里有很多不错的选择，但我个人更喜欢Handlebars。您还可以选择Mustache，（极简主义）Underscore模板函数，多个jQuery插件等。

一旦你选择了一个库，你通常会用它来构建/编译一个模板函数来生成HTML。这是一个简单的Handlebars示例：

var template = Handlebars.compile('<span>Hello {{target}}</span>');

可以（可选）在View代码中完成：

 var MyView = Backbone.View.extend({
     template: Handlebars.compile('<span>Hello {{target}}</span>')
 });

拥有该模板功能后，通常会传递一个值映射：

var resultText = template({target: 'World!'});

并取回渲染结果：

resultText == '<span>Hello World!</span>';

您可以根据需要将其放入Backbone中，但一种常见的模式如下所示：

 var MyView = Backbone.View.extend({
     template: Handlebars.compile('<span>Hello {{target}}</span>'),
     render: function() {
         var valueMap = this.model.toJSON();
         this.$el.html(this.template(valueMap));
     }
 });

 // Usage:
 new MyView({
     el: '#someElement',
     model: new Backbone.Model({target: 'World!'}
 )).render();

Backbone.js模板示例

2 个答案: