If you download the tutorial for backbone.js part 1 here http://net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-1/ you will see the UI is using html file, with html extension of course.
You can create a new MVC3 web application using ASP.NET MVC 3 Web Application.
1. Add the following code into HomeController.cs.
publicActionResult Contact()
{
return View();
}
2. Right click the Contact() area in the HomeController and choose Add View.
3. You will now see Contact.cshtml in the View folder.
4. Paste the following code to the Contact.cshtml after the } .
<div>
<metacharset=”UTF-8″/>
<title>Backbone.js Web App</title>
<linkhref=”../../Content/screen.css”rel=”stylesheet”type=”text/css”/>
</div>
<div>
<divid=”contacts”></div>
<scriptid=”contactTemplate”type=”text/template”>
<img src=”<%= photo %>” alt=”<%= name %>” />
<h1><%= name %><span><%= type %></span></h1>
<div><%= address %></div>
<dl>
<dt>Tel:</dt><dd><%= tel %></dd>
<dt>Email:</dt><dd><a href=”mailto:<%= email %>”><%= email %></a></dd>
</dl>
</script>
<scriptsrc=”../../Scripts/jquery-1.7.1.min.js”></script>
<scriptsrc=”../../Scripts/json2.js”></script>
<scriptsrc=”../../Scripts/underscore-min.js”></script>
<scriptsrc=”../../Scripts/backbone-min.js”></script>
<scriptsrc=”../../Scripts/app.js”type=”text/javascript”></script>
</div>
5. Make sure you have all the js libraries such as jquery-1.7.1.min.js.
6. app.js is your JQuery and not the library.
(function ($) {
//demo data
var contacts = [
{ name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
{ name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
{ name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" },
{ name: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" },
{ name: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
{ name: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" },
{ name: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" },
{ name: "Contact 8", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" }
];
//define product model
var Contact = Backbone.Model.extend({
defaults: {
photo: “/img/placeholder.png”
}
});
//define directory collection
var Directory = Backbone.Collection.extend({
model: Contact
});
//define individual contact view
var ContactView = Backbone.View.extend({
tagName: “article”,
className: “contact-container”,
template: $(“#contactTemplate”).html(),
render: function () {
var tmpl = _.template(this.template);
$(this.el).html(tmpl(this.model.toJSON()));
returnthis;
}
});
//define master view
var DirectoryView = Backbone.View.extend({
el: $(“#contacts”),
initialize: function () {
this.collection = new Directory(contacts);
this.render();
},
render: function () {
var that = this;
_.each(this.collection.models, function (item) {
that.renderContact(item);
}, this);
},
renderContact: function (item) {
var contactView = new ContactView({
model: item
});
this.$el.append(contactView.render().el);
}
});
//create instance of master view
var directory = new DirectoryView();
} (jQuery));
When you run your application with /home/Contact at the back you should see the result.
You can also download a single solution from http://skydrive.live.com. The sample file name is MvcAppBackbone.rar My MSN ID is chanmmn@hotmail.com.
Reblogged this on DOT NET SPICE.