Create Backbone.js App With Helper.js

Introduction

In this article I will create an application in which we can add an article type of description. We can also delete and edit this article. In this article we use the helper.js script.

We know that backbone is a JavaScript library for client-side applications. It helps for managing the code for the developers that use this code to create a single page application. Backbone.js has four classes that are Models, Views, Controllers and Collections. The Models and Collections work together when combined , those two classes make up the Model of MVC.

Now we can see how to create an application:

First create a web application:

Start Visual Studio 2013.
From the Start window select "New Project".
Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET Empty Web Application".

Add Web Application

Click on the "OK" button.

Now add the HTML Page to the project:

In the Solution Explorer.
Right-click on the project and select "Add" -> "HTML Page".

Add HTML Page

Change the name.

Change Name

Then click on the "OK" button.

Add the following code:

<!doctype html>

<head>

<title>Backbone.js application</title>

</head>

<body>

</div>

<h2>Lists of articles</h2>

<% if (articles && articles.length === 0) {

%><div style="margin-top:10px;">There is no article</div><%

} %>

</div>

</script>

</div>

<h5 style="color:white;padding-left:10px;">You want to delete it <%= article.title %> ?</h5>

</div>

<a href="#edit/<%= article.cid %>" class="button icon edit just-icon"></a>

</div>

<a href="#<%= article.cid %>" title="Voir l'article">

</a>

</div>

</script>

<% var article = model.toJSON(); %>

<%= article.contenu %>

</p>

<a href="#edit/<%= model.cid %>" class="button primary icon edit" style="float:right;">

Edit Article</a></button>

<a href="#" class="button" style="margin:0;">Return</a>

</script>

<h2><%= (article ? 'Éditer' : 'Add') %> an Article</h2>

<b style="font-size:1.1em;">Title : </b><br /><input type="text" name="title" value="<%= (article ? article.title : '') %>" class="field" style="width:100%;margin-top:5px;margin-bottom:8px;" /><br />

<b style="font-size:1.1em;">About It : </b><br />

<button type="submit" class="button primary disabled icon <%= (article ? 'edit' : 'add') %>" style="float:right;"><%= (article ? 'Edit' : 'Add') %> article</button>

<a href="#" class="button" style="margin:0;">Return</a>

</form>

</div>

</script>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-27481530-1']);

_gaq.push(['_trackPageview']);

(function () {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

</body>

</html>

Now we add a JavaScript as in the following:

In the Solution Explorer.
Right-click on the project then select "Add" -> "New Item" -> "JavaScript".

Add JavaScript file

Click on the "Add" button.

Add the following code:

var app = {

collections: {},

models: {},

views: {},

routers: {},

modals: {},

init: function () {

// Initiate modal

app.modals.supp = '#modal-supp';

$('#suppNo').click(function () {

$(app.modals.supp).modal('hide');

});

// Initialisation of route

this.articlesRouter = new this.routers.articles();

Backbone.history.start();

}

};

jQuery(function () {

// initiate app

app.init();

});

Execute the application:

Display Image

Add the title with description.

Add article with description