Alex Zirbel
Isolated parts of your app
Date picker
Select
Table
Show Addepar's Open Source components
Discuss Ember component principles
Build a personal finance tool
Open Source
Charts
Table
Widgets
ember new minipar
transactions: func() {
get('tx').filter(
...);
}.property('tx'),
{{table-component
hasFooter=false
columns=columns
content=transactions
}}
{{table-component
hasFooter=false
columns=columns
content=transactions
filterText=filter
}}
ExtraAdvancedTableComponent =
Ember.Table.EmberTableComponent.extend({
filterText: null
...
});
{{extra-advanced-table
hasFooter=false
columns=columns
content=transactions
filterText=filter
}}
Addepar.ReportHtmlTableComponent =
Ember.Table.EmberTableComponent.extend({
render: function(buffer) {
// Render HTML
// We don't even use Ember Table's
// main feature, lazy rendering!
}
});
{{table-component columns=columns content=transactions selection=selectedTransaction }} {{select-component content=categories selection=selectedTransaction.category }}
Great while your app is simple
Great for text fields
Great for forms
Not so great when things get complex
Example 1: Selected Row
This is internal table state
What happens when it is bound to 10 different components?
Example 2: Invalid Input
When do you verify input?
What happens when an invalid value triggers errors elsewhere in your app?
{{table
selection=selectedRow
}}
{{table
on-change="updateSelection" selection=selectedRow }}
{{table
on-change="updateSelection" selection=selectedRow }}
Data Down
{{table
on-change="updateSelection" selection=selectedRow }}
Data Down
Actions Up
{{horizontal-bar-chart data=content }} {{vertical-bar-chart data=content }} {{pie-chart data=content }}
{{horizontal-bar-chart data=content }} {{vertical-bar-chart data=content }} {{pie-chart data=content }}
{{bar-chart
data=content
orientation="h.."
}}
// OR
{{grouped-chart
data=content
type="pie"
}}
Addepar