Horváth Győző
Egyetemi adjunktus
1117 Budapest, Pázmány Péter sétány 1/c., 2.420-as szoba
Tel: (1) 372-2500/1816
horvath.gyozo@inf.elte.hu
Egyoldalas alkalmazások
Single Page Applications (SPA)
Hivatalosan
npm install ember-cli -g
ember new myappCloud9
nvm use v0.12.7 (0.12.x)node_modules feltöltésebower install -g./node_modules/.bin/ember init --skip-npm.ember-cli
{
"disableAnalytics": false,
"liveReload": false,
"usePods": true
}config/environment.js
var ENV = {
modulePrefix: 'myapp',
podModulePrefix: 'myapp/pods',
// ...
}bower install --save bootstrap bootswatch
ember-cli-build.js
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
});
app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootswatch/sandstone/bootstrap.min.css');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');
return app.toTree();
};./node_modules/.bin/ember generate route alma
./node_modules/.bin/ember generate template alma
./node_modules/.bin/ember generate component alma
./node_modules/.bin/ember generate resource almaRouter.map(function() {
this.route('about', { path: '/about' });
this.route('favorites', { path: '/favs' });
});{{#link-to "index"}}<img class="logo">{{/link-to}}
<nav>
{{#link-to "about"}}About{{/link-to}}
{{#link-to "favorites"}}Favorites{{/link-to}}
</nav>
A link in {{#link-to "index"}}Block Expression Form{{/link-to}},
and a link in {{link-to "Inline Form" "index"}}.
<p>
{{link-to "Edit this photo" "photo.edit" photo class="btn btn-primary"}}
</p>ember generate component my-component-name
Definíciós sablon
<article class="blog-post">
<h1>{{title}}</h1>
<p>{{yield}}</p>
<p>Edit title: {{input type="text" value=title}}</p>
</article>Használat
{{#blog-post title=post.title}}
{{post.body}}
{{/blog-post}}Készítsük el a hibakezelő alkalmazás oldalait a belső hivatkozásokkal és beégetett adatokkal!
Bontsuk komponensekre az oldalakat!
Person = Ember.Object.extend({
say(thing) {
alert(thing);
}
});Person = Ember.Object.extend({
say(thing) {
var name = this.get('name');
alert(`${name} says: ${thing}`);
}
});Soldier = Person.extend({
say(thing) {
this._super(thing + ', sir!');
}
});var connor = Soldier.create({
name: 'John Connor'
});
connor.say('Yes'); // "John Connor says: Yes, sir!"var person = Person.create();
var name = person.get('name');
person.set('name', 'John Connor');Person.reopen({
isPerson: true
isMachine: false
});
Person.create().get('isPerson') // true
Person.create().get('isMachine') // falsePerson.reopenClass({
mainOrder: "Protect John Connor"
});
Person.mainOrder // "Protect John Connor"Person.reopen({
say(thing) {
this._super(thing + '!');
}
});Person = Ember.Object.extend({
firstName: null,
lastName: null,
fullName: Ember.computed('firstName', 'lastName', function() {
return `${this.get('firstName')} ${this.get('lastName')}`;
})
});
var johnConnor = Person.create({
firstName: 'John',
lastName: 'Connor'
});
johnConnor.get('fullName'); // "John Connor"Person = Ember.Object.extend({
firstName: null, lastName: null, born: null, country: null,
fullName: Ember.computed('firstName', 'lastName', function() {
return `${this.get('firstName')} ${this.get('lastName')}`;
}),
description: Ember.computed('fullName', 'born', 'country', function() {
return `${this.get('fullName')}; Born: ${this.get('born')}; Country: ${this.get('country')}`;
})
});
var johnConnor = Person.create({
firstName: 'John', lastName: 'Connor',
born: 1981, country: 'USA'
});
johnConnor.get('description'); // "John Connor; Born: 80; Country: USA"Person = Ember.Object.extend({
firstName: null, lastName: null,
fullName: Ember.computed('firstName', 'lastName', {
get(key) {
return `${this.get('firstName')} ${this.get('lastName')}`;
},
set(key, value) {
var [firstName, lastName] = value.split(/\s+/);
this.set('firstName', firstName);
this.set('lastName', lastName);
return value;
}
})
});
var johnConnor = Person.create();
johnConnor.set('fullName', 'John Connor');
johnConnor.get('firstName'); // John
johnConnor.get('lastName'); // ConnorPerson = Ember.Object.extend({
// ...
fullNameChanged: Ember.observer('fullName', function() {
// Módosításkor lefutó kód
})
});
var johnConnor = Person.create({
firstName: 'John',
lastName: 'Connor'
});
johnConnor.set('firstName', 'John'); // observer eseményPerson.reopen({
partOfNameChanged: Ember.observer('firstName', 'lastName', function() {
// Két property esetén is végrehajtódik az esemény
})
});
johnConnor.set('firstName', 'John'); // observer esemény
johnConnor.set('lastName', 'Connor'); // observer eseményjohnConnor.addObserver('fullName', function() {
// ...
});connor = Ember.Object.create({
modelVersion: 800
});
Terminator = Ember.Object.extend({
modelVersion: Ember.computed.alias('connor.modelVersion')
});
terminator = Terminator.create({
modelVersion: connor
});
terminator.get('modelVersion'); // 800
connor.set('modelVersion', 1000);
terminator.get('modelVersion'); // 1000Ember.computed.oneWay(...)
john = Ember.Object.create({
fullName: 'John Connor'
});
Person = Ember.Object.extend({
fullName: Ember.computed.oneWay('john.fullName')
});
person = Person.create({
user: john
});
// Megváltozttja a person nevét, "John Connor" lesz
john.set('fullName', 'John Connor');
// Ez nem hat vissza
person.set('fullName', 'John Reese');
john.get('fullName'); // "John Connor"var food = ['Poi', 'Ono', 'Adobo Chicken'];
food.forEach(function(item, index) {
console.log(`Menu Item ${index+1}: ${item}`);
});var animals = ['rooster', 'pig'];
animals.get('lastObject');
//=> "pig"
animals.pushObject('peacock');
animals.get('lastObject');
//=> "peacock"var words = ['goodbye', 'cruel', 'world'];
var emphaticWords = words.map(function(item) {
return item + '!';
});
// ["goodbye!", "cruel!", "world!"]var hawaii = Ember.Object.create({
capital: 'Honolulu'
});
var california = Ember.Object.create({
capital: 'Sacramento'
});
var states = [hawaii, california];
states.mapBy('capital');
//=> ["Honolulu", "Sacramento"]var arr = [1,2,3,4,5];
arr.filter(function(item, index, self) {
return item < 4;
})
// returns [1,2,3]