刚刚用Backbone弄湿我的脚,但我在使用这个简单的例子时遇到了一些麻烦。我收到错误
“未捕获的TypeError:对象不是函数”
当我尝试实例化状态集合var States = new States();
时。模型/集合已经宣布,所以我感到困惑。
<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>
答案 0 :(得分:3)
更改此
var States = new States();
到
var states = new States();
或使用其他变量
States是一个Backbone集合。由于名称冲突,您收到错误。
尝试使用其他名称命名实例。
对于函数名称使用 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();
});
<强> Check Fiddle 强>