Backbone简单示例

要的资源：

<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>

HTML：

<div id="divTip" style="padding: 5px; margin: 20px; border: 2px solid #0000ff;">

</div>

js：

<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>

效果：

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