Backbone.js模板示例

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 。這裏有一個簡單的把手例如：

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

可以（可選）完成爲您查看代碼的一部分：

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

一旦你的模板函數，通常需要傳遞一個值映射：

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

並取回渲染結果：

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

能夠適合您，在科博不過你想要的，但一個共同的模式是類似以下內容：

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();