1. No category

1
●
●
●
2
3
4
5
6
7
8
9
//html
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div id="content">
</div>
//javascript
var HomeView = Backbone.View.extend({
template: '<h1>Home</h1>',
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.template);
}
});
var AboutView = Backbone.View.extend({
template: '<h1>About</h1>',
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.template);
}
});
var AppRouter = Backbone.Router.extend({
routes: {
'': 'homeRoute',
'home': 'homeRoute',
'about': 'aboutRoute',
},
homeRoute: function () {
var homeView = new HomeView();
$("#content").html(homeView.el);
},
aboutRoute: function () {
var aboutView = new AboutView();
$("#content").html(aboutView.el);
10
}
});
var appRouter = new AppRouter();
Backbone.history.start();
//JSFiddle
11
//html
<script type="text/ng-template" id="embedded.home.html">
<h1> Home </h1>
</script>
<script type="text/ng-template" id="embedded.about.html">
<h1> About </h1>
</script>
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div ng-view></div>
</div>
//javascript
var routingExample = angular.module('FunnyAnt.Examples.Routing', []);
routingExample.controller('HomeController', function ($scope) {});
routingExample.controller('AboutController', function ($scope) {});
routingExample.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
//JSFiddle
12
//html
<script type="text/x-handlebars" data-template-name="application">
<h1> Ember Routing</h1>
<div id="navigation">
<a href="#">Home</a>
<a href="#about">About</a>
</div>
<br />
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="home">
<h2> Home Page </h2>
</script>
<script type="text/x-handlebars" data-template-name="about">
<h2> About Page </h2>
</script>
//javascript
App = Ember.Application.create();
App.Router.map(function() {
//first paramater refers to the template
this.route('home', { path: '/' });
this.route('about');
});
//JSFiddle
13
14
//html
<h1>Simple Data Binding with AngularJS</h1>
<br />
<div ng-app>
Name: <input type="text" ng-model="name" />
<br /><br />
Welcome to AngularJS {{name}}
</div>
//javascript
//No JavaScript needed aside from the reference to the AngularJS script.
//JSFiddle
15
//html
<div class="liveExample">
<p>Enter name and tab out of field</p>
<p>Name: <input data-bind='value: name' /></p>
<p>Welcome to KnockoutJS <span data-bind='text: name'></span></p>
</div>
//javascript
// Here's my data model
var ViewModel = function(name) {
this.name = ko.observable(name);
};
ko.applyBindings(new ViewModel("")); // This makes Knockout get to work
//JSFiddle
16
//html
<h1>Manual Data binding in Backbone.js</h1>
<p>Enter a name in the input below</p>
<div id="message-container">
<input id="name" />
<br />
<span id="message"></span>
</div>
<script type="text/template" id="message-template">
Welcome to Backbone <%=name%>
</script>
//javascript
var MessageView = Backbone.View.extend({
template: _.template($('#message-template').html()),
events: {
'keyup #name': 'updateModel'
},
updateModel: function(event) {
this.model.set({name:$("#name").val()});
},
initialize: function() {
this.listenTo(this.model, "change", this.render);
this.render();
},
render: function() {
this.$('#message').html(this.template(this.model.toJSON()));
return this;
}
17
});
var person = new Backbone.Model({name:''});
messageView = new MessageView({el:
$('#message-container') ,model:
person});
//JSFiddle
18
//html
<script type="text/x-handlebars" data-template-name="application">
<h1>EmberJS data binding</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
Name: {{input type="text" value=name }}
<br />
<br />
Welcome to Ember {{name}}
</script>
//javascript
App = Ember.Application.create({});
App.IndexRoute = Ember.Route.extend({
model: function(){
return{
name: ''
};
}
});
//JSFiddle
19
20
21
22
23
24
25
26
27
28
29