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>

效果：