Jquery Undefined不是一个函数：实例化主干集合_Jquery_Backbone.js_Handlebars.js

Jquery Undefined不是一个函数：实例化主干集合
jquery backbone.js
Jquery Undefined不是一个函数：实例化主干集合,jquery,backbone.js,handlebars.js,Jquery,Backbone.js,Handlebars.js,只是让我的脚湿了脊梁骨，但我有一些困难让这个简单的例子工作。我犯了一个错误 “未捕获的TypeError:对象不是函数” 当我尝试实例化States集合var States=newstates（）时。模型/集合已声明，因此我感到困惑 <body> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> &
只是让我的脚湿了脊梁骨，但我有一些困难让这个简单的例子工作。我犯了一个错误
“未捕获的TypeError:对象不是函数”
当我尝试实例化States集合
var States=newstates（）时。模型/集合已声明，因此我感到困惑
 <body>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js"></script>
        <script type="text/javascript"  src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
        <script  type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

        <div id='StatesContainer' ></div>

        <!-- 
            Note the []  this is important
        because handlebars and backbone collections
        dont play well with each other in regards
        to naming JSON groups 
        -->
        <script id="StateTemplate" type="text/x-handlebars-template">
        <div>
            {{#each []}}
                {{this.name}}
                {{this.abbreviation}}
                <br/>
            {{/each}}
        <div>
        </script>
        <!-- End templates setup -->

        <script>
            var State = Backbone.Model.extend({});
            var States = Backbone.Collection.extend({
                model: State,
                initialize: function () { }
            });
            //define view for all models
            var StatesView = Backbone.View.extend({
                render: function () {
                    var template = Handlebars.compile(source);
                    var html = template(this.collection.toJSON());
                    $(this.el).html(html);
                },
                initialize: function () {
                    //wire up events to trigger re-rendering of view
                    this.collection.on('add', this.render, this);
                    this.collection.on('remove', this.render, this)
                }
            });
            //THANKS Rameş Aliyev for the feedback on making this cleaner
            // https://gist.github.com/4682984

            $(document).ready(function () {
                // We have to do this stuff in the dom ready
                // so that the container objects get built out
                // Create instance of model Collection
                var States = new States();

                // Create new instances of the person models
                var State = new State({ name: "New York", abbreviation: "NY" });
                var State2 = new State({ name: "New Jersey", abbreviation: "NJ" });
                var State3 = new State({ name: "New Mexico", abbreviation: "NM" });

                //add models to the collection
                States.add(State);
                States.add(State2);

                // Create instances of the views
                var StatesView = new StatesView({
                    collection: States
                });

                //container for rendered view
                StatesView.el = $('#StatesContainer');
                //template 
                StatesView.source = $('#StateTemplate').html();
                //render view
                StatesView.render();

                //StatesView.render();
                //add a new model to the collection, will update view
                //people.add(State3);

                //remove some models from the collection, will update view
                //people.remove(State2);
                //people.remove(State3);
            });
         </script>
        </body>


{{{#每个[]}
{{this.name}}
{{this.缩写}}


{{/每个}}
var State=Backbone.Model.extend（{}）；
var States=Backbone.Collection.extend({
型号：国家，
初始化：函数（）{}
});
//为所有模型定义视图
var StatesView=Backbone.View.extend({
渲染：函数（）{
var template=handlebar.compile（源代码）；
var html=template（this.collection.toJSON（））；
$（this.el）.html（html）；
},
初始化：函数（）{
//连接事件以触发视图的重新渲染
this.collection.on（'add'，this.render，this））；
this.collection.on（'remove'，this.render，this）
}
});
//感谢RameşAliyev提供的有关清洁的反馈
// https://gist.github.com/4682984
$（文档）.ready（函数（）{
//我们必须在dom中做好准备
//这样就可以构建容器对象
//创建模型集合的实例
变量状态=新状态（）；
//创建人物模型的新实例
var State=纽约州（{名称：“纽约”，缩写：“NY”}）；
var State2=新州（{名称：“新泽西”，缩写：“NJ”}）；
var State3=新州（{名称：“新墨西哥”，缩写：“NM”}）；
//将模型添加到集合中
添加（州）；
国家。添加（国家2）；
//创建视图的实例
var StatesView=新StatesView({
收藏：美国
});
//渲染视图的容器
StatesView.el=$（“#StatesContainer”）；
//模板
StatesView.source=$（'#statemplate'）.html（）；
//渲染视图
StatesView.render（）；
//StatesView.render（）；
//将新模型添加到集合中，将更新视图
//添加（State3）；
//从集合中删除一些模型，将更新视图
//人员。移除（状态2）；
//人员。移除（状态3）；
});
更改此选项
var States = new States();

到
或者使用不同的变量
州是一个主干集合。由于名称冲突，您将收到一个错误
尝试使用其他名称命名实例
函数名使用PascalCase，对象实例使用camelCase

 var State = Backbone.Model.extend({});
var States = Backbone.Collection.extend({
    model: State,
    initialize: function () {}
});

//define view for all models
var StatesView = Backbone.View.extend({
    render: function () {
        var template = Handlebars.compile($('#StateTemplate').html());
        var html = template(this.collection.toJSON());
        $(this.el).html(html);
    },
    initialize: function () {
        //wire up events to trigger re-rendering of view
        this.collection.on('add', this.render, this);
        this.collection.on('remove', this.render, this)
    }
});
//THANKS Rameş Aliyev for the feedback on making this cleaner
// https://gist.github.com/4682984

$(document).ready(function () {
    // We have to do this stuff in the dom ready
    // so that the container objects get built out
    // Create instance of model Collection
    var states = new States();

    // Create new instances of the person models
    var state = new State({
        name: "New York",
        abbreviation: "NY"
    });
    var state2 = new State({
        name: "New Jersey",
        abbreviation: "NJ"
    });
    var state3 = new State({
        name: "New Mexico",
        abbreviation: "NM"
    });

    //add models to the collection
    states.add(state);
    states.add(state2);

    // Create instances of the views
    var statesView = new StatesView({
        collection: states
    });

    //container for rendered view
    statesView.el = $('#StatesContainer');
    //template 
    statesView.source = $('#StateTemplate').html();
    //render view
    statesView.render();

});

此外，在实例化statesView
后，不要修改el；在初始化器对象中设置它。
 var State = Backbone.Model.extend({});
var States = Backbone.Collection.extend({
    model: State,
    initialize: function () {}
});

//define view for all models
var StatesView = Backbone.View.extend({
    render: function () {
        var template = Handlebars.compile($('#StateTemplate').html());
        var html = template(this.collection.toJSON());
        $(this.el).html(html);
    },
    initialize: function () {
        //wire up events to trigger re-rendering of view
        this.collection.on('add', this.render, this);
        this.collection.on('remove', this.render, this)
    }
});
//THANKS Rameş Aliyev for the feedback on making this cleaner
// https://gist.github.com/4682984

$(document).ready(function () {
    // We have to do this stuff in the dom ready
    // so that the container objects get built out
    // Create instance of model Collection
    var states = new States();

    // Create new instances of the person models
    var state = new State({
        name: "New York",
        abbreviation: "NY"
    });
    var state2 = new State({
        name: "New Jersey",
        abbreviation: "NJ"
    });
    var state3 = new State({
        name: "New Mexico",
        abbreviation: "NM"
    });

    //add models to the collection
    states.add(state);
    states.add(state2);

    // Create instances of the views
    var statesView = new StatesView({
        collection: states
    });

    //container for rendered view
    statesView.el = $('#StatesContainer');
    //template 
    statesView.source = $('#StateTemplate').html();
    //render view
    statesView.render();

});