Skip to content

Instantly share code, notes, and snippets.

@Panya

Panya/001.objects.js

Created November 9, 2012 12:54
Show Gist options
  • Save Panya/4045539 to your computer and use it in GitHub Desktop.
Save Panya/4045539 to your computer and use it in GitHub Desktop.
Download ZIP
Ember.js Intro
Raw
001.objects.js
var Person = Em.Object.extend({
firstName: '',
lastName: '',
sayHello: function() {
alert('Hello!');
}
});
var person = Person.create({
firstName: 'Mikhail',
lastName: 'Korepanov'
});
// Тоже самое для класса Person.reopenClass
person.reopen({
age: 24,
sayHello: function() {
console.log('Hello ', this.get('firstName'));
this._super();
}
});
// Миксины
Em.mixin(person, { city: 'Korolev', country: 'Russia' });
Raw
002.kvo.js
var person = Em.Object.create({
firstName: 'Mikhail',
lastName: 'Korepanov'
});
person.get('lastName');
person.set('firstName', 'Victor');
person.reopen({
fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName'),
firstNameChanged: function() {
console.log('firstName did changed!');
}.observes('firstName')
});
person.get('fullName'); // 'Victor Korepanov'
person.set('firstName', 'Mikhail');
var todos = Em.Object.create({
items: [
Em.Object.create({ isDone: false, title: 'Item 1' }),
Em.Object.create({ isDone: true, title: 'Item 2' }),
Em.Object.create({ isDone: true, title: 'Item 3' }),
Em.Object.create({ isDone: false, title: 'Item 4' })
],
remaining: function() {
var items = this.get('items');
return items.filterProperty('isDone', false).get('length')
}.property('items.@each.isDone')
})
todos.get('remaining'); // 2
todos.get('items').objectAt(0).set('isDone', true);
todos.get('remaining'); // 1
Raw
003.bindings.js
var Country = Em.Object.create({
name: 'Russia'
});
var Person = Em.Object.create({
firstName: 'Mikhail',
lastName: 'Korepanov',
countryBinding: 'Country.name'
});
Person.get('country'); // 'Russia'
// Потом
Country.set('name', 'Germany');
Person.get('country'); // 'Germany'
// Биндинг в одну сторону
var Person = Em.Object.create({
countryBinding: Em.Binding.oneWay('Country.name')
});
Raw
004.views.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js Views</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="greeting">
<h1>Hello, {{App.Person.name}}</h1>
</script>
<script src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
<script src="004.views.js"></script>
</body>
</html>
Raw
004.views.js
var App = Em.Application.create();
App.Person = Em.Object.create({
name: 'Mikhail'
});
App.GreetingView = Em.View.extend({
templateName: 'greeting'
});
var view = App.GreetingView.create();
view.append();
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js</title>
<script src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment