BackboneTable - Test

by László Kovács

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.2/jquery.mockjax.min.js"></script>
<body>

	<header>
		<h1> Table Test </h1>
		<nav>
			<ul>
				<li></li>
			</ul>
		</nav>
	</header>
	
	<section>
	<table class="targetTable">
	 <tr id="tr1" class="tableHead">    
	   <th id="personId_td"> PersonID 
	   </th>
	   <th id="personName_td">   Name
	   </th>
	   <th id="personAge_td">   Age
	   </th>
	   <th id="personAddress_td">   Address
	   </th>
	   <th id="personNumber_td">   Phone Number
	   </th>
	 </tr>
	 <tr id="tr2" class="tableItem">    
	   <td id="personId_td"> 00012345001  
	   </td>
	   <td id="personName_td"> Katniss Everdeen
	   </td>
	   <td id="personAge_td"> 16
	   </td>
	   <td id="personAddress_td"> Panem
	   </td>
	   <td id="personNumber_td">  06-12-666-23
	   </td>  
	 </tr>
	 <tr id="tr3" class="tableItem">    
	   <td id="personId_td"> 00012345007  
	   </td>
	   <td id="personName_td"> Harry Potter
	   </td>
	   <td id="personAge_td"> 12
	   </td>
	   <td id="personAddress_td"> Roxfort
	   </td>
	   <td id="personNumber_td">  06-9&3/4-666-23
	   </td>  
	 </tr>
	 <tr id="tr4" class="tableItem">    
	   <td id="personId_td"> 00012345013 
	   </td>
	   <td id="personName_td"> Bruce Wayne
	   </td>
	   <td id="personAge_td"> 32
	   </td>
	   <td id="personAddress_td"> Gotham City
	   </td>
	   <td id="personNumber_td">  06-1-666-23
	   </td>  
	 </tr>
	</table>
		
	</section>

	<footer>
		</br>
		<p>Copyright 2014 Telekom</p>
	</footer>

 	<script id="personTemplate" type="text/template">
   		  <tr>    
	   		<td id="personID_td"> <%= personID %> 	   		</td>
	  		<td id="personName_td"> <%= personName %>	   		</td>
	   		<td id="personAge_td"> <%=...

CSS

* {
  margin: 0px;
  padding: 0px;
}

table{
  width: 800px;
  background-color: #eee;
  border: 1px solid black;
}

th {
  background-color: #6C6C6C;
}

tr {
  border: 1px solid black;
}

td {
  
}

JavaScript

var Person = Backbone.Model.extend({ urlRoot: "/person" }), 
    person,
    People = Backbone.Collection.extend({ url: "/people", model: Person }), 
    people;

var PersonView = Backbone.View.extend({
    tagName: 'tr',
    template: _.template( $( '#personTemplate' ).html() ),

    render: function() {
        this.$el.html( this.template( this.model.attributes ) );
        return this;
    }
});


// Fetching a single model
$.mockjax({
    url: "/person/*",
    responseText: { personID: 1,  personName: 'Unknown',
          personAge: 'Unknown',
          personAddress: 'Unknown',
          personNumber: 'Unknown' }
});
person = new Person({ id: 1 });
person.fetch({
    success: function () {
        console.log("-------------------");
        console.log("Person data:");
        console.log(person.get("personName"));
        console.log(person.get("personAge"));
    }
});
$.mockjaxClear();

// Fetching a collection of models
$.mockjax({
    url: '/people',
    responseText: [
                {     personID: '00012345007',
                  personName: 'Harry Potter',
                  personAge: '12',
                  personAddress: 'Roxfort',
                  personNumber: '06-9&3/4-666-23'}, 
                {     personID: '00012345013',
                  personName: 'Bruce Wayne',
                  personAge: '32',
                  personAddress: 'Gotham City',
                  personNumber: '06-1-666-23' }
            ]
});
var people = new People();
people.fetch({
    success: function () {
        console.log("-------------------");
        console.log("People data:");
        for (i = 0; i < people.length; ++i) {
            console.log("Item #" + (i + 1) + " - " + JSON.stringify(people.at(i))); }
    }
});
$.mockjaxClear();