Más contenido relacionado
La actualidad más candente (14)
Similar a Зачем нужен EmberJS, если мне хвататет jQuery (20)
Más de Sergey Bolshchikov (12)
Зачем нужен EmberJS, если мне хвататет jQuery
- 2. ● Ведущий front end разработчик
в New ProImage
● Со-организатор
EmberJS Tel-Aviv Meetup
● Со-организатор
EmberFest Europe
Я!
1
- 3. ВЫ!
● Кто пишет front end?
● Кто знает JavaScript?
● Кто использует какой-либо JavaScript MVC
фреймворк?
● Кто использует EmberJS?
2
- 4. - КАКОЙ MVC ФРЕЙМВОРК ТЫ
БУДЕШЬ ИСПОЛЬЗОВАТЬ
- НИКАКОЙ, JQUERY ХВАТИТ
3
- 5. 1. <div id="form">
2. <div>
3. <label>First Name:</label> <input id="firstName"
placeholder="your first name" />
4. </div>
5. <div>
6. <label>Last Name:</label> <input id="lastName"
placeholder="your last name" />
7. </div>
8. <div>
9. <label>Full Name:</label> <input id="fullName"
placeholder="your full name" readonly/>
10. </div>
11. </div>
JQUERY HTML
4
- 6. JQUERY JS
1. var App = {
2. user: {}
3. },
4. firstNameInput = $('#firstName'),
5. lastNameInput = $('#lastName'),
6. fullNameInput = $('#fullName');
7. // set initial values
8. fullNameInput.val(App.user.firstName + ' ' + App.user.lastName);
9. // bind events
10. firstNameInput.on('keyup', function () {
11. App.user.firstName = firstNameInput.val();
12. fullNameInput.val(firstNameInput.val() + ' ' + lastNameInput.
val());
13. });
14. lastNameInput.on('keyup', function () {
15. App.user.lastName = lastNameInput.val();
16. fullNameInput.val(firstNameInput.val() + ' ' + lastNameInput.
val());
17. });
18. window.App = App;
5
- 7. EMBER HTML
1. <script type="text/x-handlebars" id="application">
2. <div id="form">
3. <div>
4. <label>First Name:</label> {{input value=App.
user.firstName placeholder="your first name"}}
5. </div>
6. <div>
7. <label>Last Name:</label> {{input value=App.user.
lastName placeholder="your last name"}}
8. </div>
9. <div>
10. <label>Full Name:</label> {{input value=App.user.
fullName placeholder="your full name" readonly="
readonly"}}
11. </div>
12. </div>
13. </script>
6
- 8. EMBER HTML
1. <script type="text/x-handlebars" id="application">
2. <div id="form">
3. <div>
4. <label>First Name:</label> {{input value=App.
user.firstName placeholder="your first name"}}
5. </div>
6. <div>
7. <label>Last Name:</label> {{input value=App.user.
lastName placeholder="your last name"}}
8. </div>
9. <div>
10. <label>Full Name:</label> {{input value=App.user.
fullName placeholder="your full name" readonly="
readonly"}}
11. </div>
12. </div>
13. </script>
7
- 9. EMBER JS
1. var App = Ember.Application.create({
2. user: Ember.Object.createWithMixins({
3. fullName: function () {
4. return this.get('firstName') + ' ' + this.get
('lastName');
5. }.property('firstName', 'lastName')
6. })
7. });
8
- 10. МНЕ ХВАТАЕТ JQUERY
1. var App = Ember.Application.create({
2. user: Ember.Object.createWithMixins
({
3. fullName: function () {
4. return this.get('firstName') + '
' + this.get('lastName');
5. }.property('firstName',
'lastName')
6. })
7. });
1. var App = {
2. user: {}
3. },
4. firstNameInput = $('#firstName'),
5. lastNameInput = $('#lastName'),
6. fullNameInput = $('#fullName');
7. // set initial values
8. fullNameInput.val(App.user.firstName +
' ' + App.user.lastName);
9. // bind events
10. firstNameInput.on('keyup', function ()
{
11. App.user.firstName = firstNameInput.
val();
12. fullNameInput.val(firstNameInput.
val() + ' ' + lastNameInput.val());
13. });
14. lastNameInput.on('keyup', function () {
15. App.user.lastName = lastNameInput.
val();
16. fullNameInput.val(firstNameInput.
val() + ' ' + lastNameInput.val());
17. });
18. window.App = App;
9
- 28. КОНВЕНЦИИ
Route Name Controller Route Template
modules ModulesController ModulesRoute modules
sessions SessionsController SessionsRoute sessions
sessions/session SessionController SessionRoute session
28
- 30. А КАК НА СЧЕТ
СИНХРОНИЗАЦИИ МЕЖДУ
МОДЕЛЬЮ И UI?
- 34. <div id="form">
<div>
<label>First Name:</label>
{{input value=App.user.firstName placeholder="your first name"}}
</div>
<div>
<label>Last Name:</label>
{{input value=App.user.lastName placeholder="your last name"}}
</div>
<div>
<label>Full Name:</label>
{{input value=App.user.fullName placeholder="your full name"}}
</div>
</div>
HBS
var App = Ember.Application.create({
user: {}
});
JS
34
- 36. <div id="form">
<div>
<label>First Name:</label>
{{input value=App.user.firstName placeholder="your first name"}}
</div>
<div>
<label>Last Name:</label>
{{input value=App.user.lastName placeholder="your last name"}}
</div>
<div>
<label>Full Name:</label>
{{input value=App.user.fullName placeholder="your full name"}}
</div>
</div>
HBS
var App = Ember.Application.create({
user: Ember.Object.createWithMixins({
fullName: function () {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
})
});
JS
36
- 42. СПАСИБО ЗА ВНИМАНИЕ
mail: sergey@bolshchikov.net
site: http://bolshchikov.net
blog: http://blog.bolshchikov.net
linkedin: http://www.linkedin.com/in/bolshchikov
github: http://github.com/bolshchikov