- // 学习 model, view, collection, event, router
- var app = app || {};
- // set(item1, item2, item3,...)
- // get()
- // set()
- // on() trriger
- // 数据元素 element
- app.singleFlower = Backbone.Model.extend({
- defaults: {
- color: "pink",
- img: "images/placeholder.jpg",
- state: "US"
- },
- initialize: function() {
- console.log("A model instance named "+this.get("name") + " has been created and it costs "+
- this.get("price") );
- this.on('change', function(){
- console.log("Something in out model has changed");
- });
- this.on('change:price', function(){
- console.log("The price for the "+ this.get('name') + " model just change to $" +
- this.get('price') + " dollars");
- })
- }
- });
- // 数据集 set
- app.FlowersCollection = Backbone.Collection.extend({
- model: app.singleFlower
- });
- // 初始化三个数据元素
- var redRoses = new app.singleFlower({
- name: "Red Roses",
- price: 39.98,
- color: "Red",
- img: "images/redRoses.jpg",
- link: "redRose"
- });
- var heirloomPinkRoses = new app.singleFlower({
- name: "heirloomPinkRoses",
- price: 50.2,
- color: "Red",
- link: "heriloomRose",
- img: "images/heirloomPinkRoses.jpg"
- });
- var anotherRoses = new app.singleFlower({
- name: "rainbowRose",
- price: 12.5,
- color: "Red",
- link: "rainbowRose"
- });
- // 渲染单个元素的模版控制器
- app.singleFlowerView = Backbone.View.extend({
- // 设置模版的属性
- tagName: "article",
- className: "flowerListItem",
- // 获取页面中定义的模版
- template: _.template( $("#flowerElement").html() ),
- // 往模版填充数据,这里模型数据是抽象的,由CollectionView控制。
- render: function() {
- this.$el.html(this.template( this.model.toJSON() ));
- return this;
- },
- // 定义事件,视图创建时,事件会自动绑定到对应的对象中。
- events: {
- 'mouseover': 'addBgColor',
- 'mouseout': 'removeBgColor',
- 'click': 'clickHandler'
- },
- clickHandler: function() {
- console.log("you click "+this.model.get('name'));
- },
- addBgColor: function() {
- this.$el.addClass('bgColorImage');
- },
- removeBgColor: function() {
- this.$el.removeClass('bgColorImage');
- }
- });
- // route 创建路由
- app.Router = Backbone.Router.extend({
- routes: {
- "": "noCopy",
- "heriloomRose": "heriloomRoseMessage",
- "rainbowRose": "rainbowRoseMessage",
- "redRose": "redRoseMessage"
- },
- noCopy: function() {
- $("#copy").html("");
- },
- heriloomRoseMessage: function() {
- $("#copy").html("heriloom Rose are great Mother's Day flowers");
- },
- rainbowRoseMessage: function() {
- $("#copy").html("Choose Rainbow Roses for your wedding");
- }
- });
- // el $el 怎么理解?
- // 渲染整个数据集的模版控制器
- app.allFlowersView = Backbone.View.extend({
- tagName: "section",
- render: function() {
- // 对每个传入的数据项调用 this.view(modelItem)
- this.collection.each(this.view, this);
- return this;
- },
- view: function(flower) {
- // 初始化模版,填充数据
- var flowerView = new app.singleFlowerView({model: flower});
- this.$el.append(flowerView.render().el);
- }
- });
- // 创建数据集
- var flowerGroup = new app.FlowersCollection([redRoses, heirloomPinkRoses, anotherRoses]);
- // 将数据集传入了模版
- var flowerGroupView = new app.allFlowersView({collection: flowerGroup});
- // 解析模版并渲染到视图
- $("#allFlowers").html(flowerGroupView.render().el);
- //应用路由
- var flowerRouter = new app.Router();
- Backbone.history.start();
- //该片段来自于http://www.codesnippet.cn/detail/2004201512326.html
来源: http://www.codesnippet.cn/detail/2004201512326.html