码迷,mamicode.com
首页 > 其他好文 > 详细

Backbone简单示例

时间:2014-06-06 22:40:44      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

要的资源:

bubuko.com,布布扣
<script type="text/javascript" src="../dep/underscore-1.6.0.min.js"></script>
<script type="text/javascript" src="../dep/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../dep/backbone-1.1.2.min.js"></script>
bubuko.com,布布扣

HTML:

bubuko.com,布布扣
<div id="divTip" style="padding: 5px; margin: 20px; border: 2px solid #0000ff;">

</div>
bubuko.com,布布扣

js:

bubuko.com,布布扣
<script type="text/javascript">
    $(function () {
        // 定义模型类
        window.Test = Backbone.Model.extend({
            defaults: {
                content: ‘‘
            }
        });
        // 创建集合模型类
        window.TestList = Backbone.Collection.extend({
            model: Test
        });
        // 向模型添加数据
        var data = new TestList({
            content: ‘hello,backbone!‘
        });
        // 创建View 对象
        window.TestView = Backbone.View.extend({
            initialize: function () {
                $(this.el).html(data.models[0].get("content"));
            }
        });
        // 实例化View 对象
        window.App = new TestView({el: $("#divTip")});
    });
</script>
bubuko.com,布布扣

效果:

bubuko.com,布布扣

 

Backbone简单示例,布布扣,bubuko.com

Backbone简单示例

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/longze/p/3765580.html

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