Backbone.js and node.js : how show my data in <select></select> html - node.js

Question

hello i am newbie in node.js and backbone.js i need u help for my development programming..
my literature : http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/
i have code in :
node.js // mongodb database
server.js
app.get('/class',function(req, res) {
console.log('show all data in class');
db.collection('ak_classroom', function(err, collection) {
collection.find().toArray(function(err, items) {
res.send(items);
});
});
});
main.js
var AppRouter = Backbone.Router.extend({
routes: {
"class" : "show_class",
},
show_class: function(page) {
var p = page ? parseInt(page, 10) : 1;
var classList = new ClassCollection();
classList.fetch({success: function(){
$("#content").html(new classView({model: classList, page: p}).el);
}});
this.headerView.selectMenuItem('home-menu');
},
});
utils.loadTemplate(['show_class_View'], function() {
app = new AppRouter();
Backbone.history.start();
});
in models.js
//=== for get my link database mongodb get /class
window.class = Backbone.Model.extend({
urlRoot: "/class",
idAttribute: "_id",
//my default variable in databsae
defaults: {
_id: null,
sch_id : "",
cls_name: "",
cls_description: "",
cls_active: "",
}});
//get collection database
window.classCollection = Backbone.Collection.extend({
model: Class,
url: "/class" });
in classlist.js
window.classView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
var class = this.model.models;
var len = class.length;
var startPos = (this.options.page - 1) * 100;
var endPos = Math.min(startPos + 100, len);
$(this.el).html('<table id="content"><thead><tr><th>ID School</th><th>Name class</th><th>Description</th></tr></thead></table>');
for (var i = startPos; i < endPos; i++) {
$('.content', this.el).append(new show_class_View({model: class[i]}).render().el);
}
return this;
}
});
window.show_class_View = Backbone.View.extend({
tagName: "tr",
initialize: function () {
this.model.bind("change", this.render, this);
this.model.bind("destroy", this.close, this);
},
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
show_class_View.html
<table width="200" border="1">
<tbody>
<tr>
<td><%= sch_id %></td>
<td><%= cls_name %></td>
<td><%= cls_description %></td>
<td><%= cls_active %></td>
</tr>
</tbody>
</table>
this scema is sucess but my question how create data for
<select name="cls_name" value="<%= cls_name %>">
<option><%= class[i].cls_name %></option>
</select>
where in select class name in array for select data ??
i am new in backbone.js so i dont know schema ?? please help i am confusion

Answer 1

My first guess would be that you need to have a proper underscore templating to make your select happen. Something like this:
<script type="text/template" id="rate_select_template">
<select id="rate-selector">
<% rates.each(function(rate) { %>
<option value="<%= rate.get('duration') %>"><%= rate.get('duration') %></option>
<% }); %>
</select>
</script>
You can see a working example here:
http://jsfiddle.net/ambiguous/AEqjn/
And the underscore template doc here: http://documentcloud.github.io/underscore/#template