View models and binding

Sencha Inc. ©2015
ViewModels
and Data Binding

Evan Trimboli
Sr. Software Engineer, Sencha
Sencha Inc. ©2015

Why ViewModels
•Automate connection between data and view
• Keep view in sync with data
• Update data with user input
•Declarative instead of imperative
Sencha Inc. ©2015

Sencha Inc. ©2015
MVVM
View ViewModel Model
Business Logic
and
Data
Presentation and view logic
Binding

Binding Essentials
•The “bind descriptor” is a value that describes
the desired data.
•The “bound value” is the desired data delivered
by the ViewModel once it becomes available.
•The bound value will be delivered again
whenever it changes.
Sencha Inc. ©2015

Direct Binding
var vm = new Ext.app.ViewModel();
var b = vm.bind('{foo}', function (v) {
console.log(v);
});
vm.set('foo', 42); // b.setValue(‘42’);
b.destroy();
1
2
3
Bind
descriptor
Bound
value
> 42
Binding
instance
4
Marks
dependencies
as dirty
Sencha Inc. ©2015

Negated Binding
vm.bind('{!x}', function (v) {
console.log(v);
});
vm.set('x', 'world');
Bind
descriptor
> false
Sencha Inc. ©2015

Binding Templates
vm.bind('Hello {x:capitalize}', function (v) {
console.log(v);
});
vm.set('x', 'world');
Bind
descriptor
> Hello World
Sencha Inc. ©2015

Objects and Arrays
vm.bind({ x: 'x={x}', y: ['{y}'] }, function (v) {
console.log(v);
});
vm.set('x', 42);
// wait for it...
vm.set('y', 13);
Bind
descriptor
> { x: 'x=42', y: [13] }
Sencha Inc. ©2015

Bind Options
vm.set(‘foo’, {bar: 1});
vm.bind('{foo}', this.onFoo, this, {
deep: true,
single: true,
twoWay: false
});
// Without deep, foo won’t change
vm.set(‘foo.bar’, 100);
Deliver
changes to
child object
properties
Deliver just the
initial value
(once available)
Don’t write-back
changes, mark
binding readOnly
Sencha Inc. ©2015

Bind Concepts in Depth
•Bind descriptor – the data you want.
•Bind token – the replaceable parts (“{foo}”) of a
bind descriptor (single name or dot path).
•Dot path – the traversal of objects and properties
starting at the root of the ViewModel.
•Bound value – the value delivered by the
ViewModel as the result of a bind request.
Sencha Inc. ©2015

Bind Descriptor
•String with one token (“{foo}”) or direct
bind.
•String template (“Hello {foo}”).
•Object whose values are bind descriptors.
{foo: “{bar}”}
•Array whose elements are bind descriptors.
[“{foo}”, “{bar}”]
Sencha Inc. ©2015

Bind Tokens
•Simple identifiers (“{foo}”) to select top-level
values in the ViewModel.
•A “dot-path” to the desired value (such as
“{ticket.reporter.name}”).
•Formatters such as “Hi {foo:capitalize}”
or “Amount {num:round(2)}”.
•Negated token (“{!foo}”).
Sencha Inc. ©2015

Dot Path
• Normal object property.
• Field from a data record (“{user.name}” not
“{user.data.name}”).
• The associated record of a “to-one” association
(“{order.user.name}”).
• The associated store of a “to many” association
(“{user.orders}”).
Sencha Inc. ©2015

Bound Value
• The exact value from the VM if a “direct bind” (just
one token).
• The boolean negation of the value if a negated direct
bind (such as “{!foo}”).
• A string with all tokens replaced and formatted (such
as “{num:round(2)}”).
• An object or array with all property values or
elements replaced by their bound value.
• A store or record instance.
Sencha Inc. ©2015

Components
and
ViewModels
Sencha Inc. ©2015

Config Binding
Ext.define('App.view.Main', {
...
items: [{
xtype: 'button',
bind: {
text: 'Sign out, {user.name}'
}
}]
});
bind
config
Sencha Inc. ©2015

Config Binding Options
Ext.define('App.view.Main', {
...
items: [{
xtype: 'button',
bind: {
text: {
bindTo: '{foo}',
single: true
}
}
}]
});
Bind
descriptor
Bind
options
Sencha Inc. ©2015

defaultBindProperty
[{
xtype: ‘button’,
bind: ‘{theText}’ // text
}, {
xtype: ‘textfield’,
bind: ‘{theValue}’ // value
}, {
xtype: ‘grid’,
bind: ‘{theStore}’ // store
}]
Sencha Inc. ©2015
•Components have a default bind property, which
maps to the most common usage for that
component

Two Way Binding
var p = new Ext.panel.Panel({
bind: {
title: ‘{theTitle}’
},
viewModel: {
data: {theTitle: ‘Foo’}
}
});
// Not twoWayBindable, won’t update VM
p.setTitle(‘Bar’);
Sencha Inc. ©2015
•Configs that cannot be changed by the user are
typically not two way bindable by default.

What ViewModel does that bind use?
Sencha Inc. ©2015

Component Tree
viewport
panel
toolbar
button
grid
panel
panel
toolbar
button
viewport
panel
toolbar
button
grid
panel
panel
toolbar
button
ViewModel
ViewModel
Sencha Inc. ©2015

ViewModel Inheritance
viewport
panel
panel
toolbar
button {
bind: '{foo}'
}
ViewModel
...
Sencha Inc. ©2015

ViewModel Hierarchy
ViewModel
ViewModel
{ }
{ }
data
prototype
data
parent
Sencha Inc. ©2015

Populating ViewModels
•Direct set() calls
•Configs
• data
• stores
• formulas
• links
Sencha Inc. ©2015

ViewModel – Data
Ext.define('App.view.main.Main’,{
extend: 'Ext.panel.Panel',
xtype: 'main',
viewModel: {
type: 'main',
data: {
foo: 42
}
}
});
Ext.define('App.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
foo: 427,
bar: ‘baz’
}
});
Sencha Inc. ©2015

ViewModel – Data (2)
Ext.create({
xtype: 'main',
viewModel: {
data: {
foo: 42
}
}
});
ViewModel
type comes
from the class
Sencha Inc. ©2015
Data is
merged, “bar”
still exists

ViewModel – Stores
Ext.define('App.view.main.MainModel’, {
stores: {
bar: {
model: 'User’,
filters: [{
property: 'name',
value: '{form.search}'
}]
}
...
Object is a bind
descriptor
Sencha Inc. ©2015

ViewModel – Store Types
stores: {
bar: {
type: 'personnel',
...
}
}
});
Ext.define('App.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
proxy: ...
});
Sencha Inc. ©2015

ViewModel – Formulas
...
formulas: {
twice: function (get) {
return 2 * get('x');
},
quad: function (get) {
return 2 * get('twice');
}
Use the
getter
Formulas can
use each other
Sencha Inc. ©2015

ViewModel – Two-Way Formulas
...
formulas: {
twice: {
get: function (get) {
return 2 * get('x');
},
set: function (v) {
this.set('x', v / 2);
}
}
Called when
dependency
changes
this == VM
Sencha Inc. ©2015

ViewModel – Links
Ext.create('App.view.form.Form', {
...
viewModel: {
links: {
ticket: theTicketInstance,
user: {
type: ‘User’,
create: {
name: ‘Foo Bar’
}
}
}
}
}
Already
loaded but
may copy
Sencha Inc. ©2015
Create a new
instance. May
also be true to
create empty
record

ViewModel – Links (Ext JS 6)
...
links: {
foo: {
a: '{some.object.foo}',
b: '{other.thing.bar}'
}
}
}
Object is a bind
descriptor
Sencha Inc. ©2015

Running The Scheduler
vm.bind(’Hello {type} {thing:capitalize}', function (v) {
console.log(v);
});
vm.set(‘thing', 'world');
vm.set(‘type’, ‘cool’);
vm.notify();
Update all dirty
bound values
Sencha Inc. ©2015

View models and binding

More Related Content

What's hot (20)

Similar to View models and binding (20)

Recently uploaded (20)

View models and binding

Editor's Notes