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>

效果：

 

转载于:https://www.cnblogs.com/longze/p/3765580.html