Fetch data from asp.net using backbone - asp.net

Question

$.ajax({
type: "POST",
url: "Home.aspx/loadSB",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
for (i = 0; i < msg.d.length; i++) {
$('#sidebar ul').append('<li class="inactive"><a>' + msg.d[i].Title + ' </a></li>');
}
}
});
I go through this
https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md
and
https://gist.github.com/ryandotsmith/1655019
tutorial and create a backbone as below, but is not working well as the model did not fetch data from asp.net, which part goes wrong? I still new to backbone
Menu = Backbone.Model.extend({
parse: function (data) { return data; }
});
MenuCol = Backbone.Collection.extend({
model: Menu,
url: "Home.aspx/loadSB",
parse: function (response) { return response.rows; }
});
MenuView = Backbone.View.extend({
initialize: function () {
this.collection.on('add', this.appendMenu, this);
},
appendMenu: function (msg) {
for (i = 0; i < msg.d.length; i++) {
this.$('ul').append('<li class="inactive"><a>' + msg.d[i].Title + ' </a></li>');
}
}
});
var mc = new MenuCol();
//mc.fetch();
//Update1:
new MenuView({ el: $('#sidebar'), collection: mc });
Update 1:
I had play around with fetch, but still not working well,
Menu = Backbone.Model.extend({});
MenuCol = Backbone.Collection.extend({
model: Menu,
url: "Home.aspx/loadSB",
});
var test = new MenuCol();
test.fetch();
It did not return the data that I want, instead of, it display the interface that my screen have
If i using the jquery.ajax without backbone, it return the json data to me, which part goes wrong? Any guide will be great
Update 2:
Ok, I had change the "fetch", and now I able to see the json data passing into backbone
var test = new MenuCol();
test.fetch({ type: 'POST', contentType: "application/json; charset=UTF-8" });

Answer 1

Ok, finally I had solved the problem,
define(['jquery', 'underscore', 'backbone'], function () {
Menu = Backbone.Model.extend({});
MenuCol = Backbone.Collection.extend({
model: Menu,
url: "Home.aspx/loadSB",
});
MenuView = Backbone.View.extend({
initialize: function () {
this.collection.on('add', _.bind(this.AppendMenu, this));
},
AppendMenu: function (msg) {
var feed = JSON.parse(JSON.stringify(msg));
for (var i = 0; i < feed.d.length; i++) {
this.$('ul').append('<li class="inactive"><a>' + feed.d[i].Title + ' </a></li>');
}
}
});
var test = new MenuCol();
test.fetch({ type: 'POST', contentType: "application/json; charset=UTF-8" });
new MenuView({ el: $('#sidebar'), collection: test })
});
by changing the fetch type to "POST" and contentType: "application/json; charset=UTF-8", finally i manage to populate web with the data I want