- Define a view template in the header of a page, define its View class and instantiate it from the body of the page
- Define a template in the body of the page and have it refer to its View class
Template in the <head> of the page
In the HTML:
<head>
<script type="text/html" data-template-name="account">
MODE:{{mode}}
<h1>{{username}}</h1>
<h1>{{city}}</h1>
</script>
</head>
<body>
<script type="text/html" data-view="App.MyView">
<h1>Hello world! {{title}}</h1>
</script>
<script type="text/html">
{{view App.AccountView}}
</script>
</body>In the javascript:
App.AccountView = SC.View.extend({
templateName: 'account',
usernameBinding: 'App.accountController.content.username',
cityBinding: 'App.accountController.content.city',
mode: 'DEV'
});
Template in the <body> of the page
In the HTML:
<body>
<script type="text/html" data-view="App.MyView">
<h1>Hello world! {{title}}</h1>
</script>
In the javascript:
App.MyView = SC.View.extend({
mouseDown: function() {
window.alert("hello world!");
},
title: 'HELLO',
});
Adding the datastore
TBD
Source code
app.js
var App = SC.Application.create({
store: SC.Store.create().from(SC.Record.fixtures)
});
App.MyView = SC.View.extend({
mouseDown: function() {
window.alert("hello world!");
},
title: 'HELLO',
});
App.Account = SC.Record.extend({
username: SC.Record.attr(String),
city: SC.Record.attr(String)
});
App.Account.FIXTURES = [ { username: 'bilou', city: 'new york' } ]
App.accountController = SC.Object.create({
content: SC.Object.create({ username: 'TEST', city: 'San Francisco' }),
city: 'SF'
});
App.AccountView = SC.View.extend({
templateName: 'account',
usernameBinding: 'App.accountController.content.username',
cityBinding: 'App.accountController.content.city',
mode: 'DEV'
});
SC.$(document).ready(function(){
var account = App.store.find(App.Account);
App.accountController.content = account.objectAt(0);
});
