码迷,mamicode.com
首页 > Web开发 > 详细

Backbone.js入门教程第二版笔记(1)

时间:2014-09-13 19:57:05      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   ar   div   sp   cti   log   

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.9.1.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>

</head>
<body>
    <button id="check">新手报到</button>
    <ul id="world-list">
    </ul>
    <script>
    (function ($) {

        var World=Backbone.Model.extend({
            name:null //为什么要创建一个空的name
        });

        var Worlds=Backbone.Collection.extend({
            initialize:function(models,options){
                this.on("add", options.view.addOneWorld);//初始化绑定add方法
            }
        });

        var  AppView=Backbone.View.extend({
            el:$(‘body‘),//指定关联的元素
            initialize:function(){//初始化方法
                this.worlds=new Worlds(null,{view:this})//实例化一个集合,并且建一个属性view用来保存视图
            },
            events:{
                ‘click #check‘:"checkIn"//绑定#check的click事件
            },
            checkIn:function(){
                var world_name=prompt("请问,您是哪星人?");
                world_name||(world_name = ‘未知‘);

                var world=new World({name:world_name});//实例化一个模块,并设置name的值
                this.worlds.add(world);//将模块添加到集合
            },
            addOneWorld:function(model){
                $("#world-list").append("<li>这里是来自 <b>" + model.get(‘name‘) + "</b> 星球的问候</li>");
            }
        });
        var appview = new AppView;//实例化AppView

    })(jQuery);
    </script>
</body>
</html>

 

Backbone.js入门教程第二版笔记(1)

标签:style   blog   color   io   ar   div   sp   cti   log   

原文地址:http://www.cnblogs.com/qianlegeqian/p/3970137.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!