Skip to content

Commit 52da220

Browse files
vsavkinvsavkin
committed
feat(change_detection): added an example demonstrating how to use observable models
Closes angular#3684
1 parent cbfc9cb commit 52da220

File tree

10 files changed

+740
-1
lines changed

10 files changed

+740
-1
lines changed

‎modules/examples/pubspec.yaml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ name: examples
22
environment:
33
sdk: '>=1.10.0 <2.0.0'
44
dependencies:
5+
observe: '^0.13.1'
56
angular2: '^<%= packageJson.version %>'
67
angular2_material: '^<%= packageJson.version %>'
78
browser: '^0.10.0'
@@ -29,8 +30,9 @@ transformers:
2930
- web/src/key_events/index.dart
3031
- web/src/sourcemap/index.dart
3132
- web/src/todo/index.dart
32-
- web/src/model_driven_forms/index.dart
3333
- web/src/order_management/index.dart
34+
- web/src/model_driven_forms/index.dart
35+
- web/src/observable_models/index.dart
3436
- web/src/person_management/index.dart
3537
- web/src/template_driven_forms/index.dart
3638
# These entrypoints are disabled until cross-package urls are working (issue #2982)
@@ -53,6 +55,7 @@ transformers:
5355
- web/src/sourcemap/index.dart
5456
- web/src/todo/index.dart
5557
- web/src/model_driven_forms/index.dart
58+
- web/src/observable_models/index.dart
5659
- web/src/order_management/index.dart
5760
- web/src/person_management/index.dart
5861
- web/src/template_driven_forms/index.dart

‎modules/examples/src/observable_models/app.dart

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
library benchmarks.src.naive_infinite_scroll.app;
2+
3+
import "package:angular2/src/facade/collection.dart" show List, ListWrapper;
4+
import "package:angular2/directives.dart" show NgIf, NgFor;
5+
import "scroll_area.dart" show ScrollAreaComponent;
6+
import "package:angular2/angular2.dart" show Component, Directive, View, IterableDiffers, SkipSelf, Binding;
7+
import "package:angular2/src/directives/observable_list_diff.dart" show ObservableListDiffFactory;
8+
import 'package:observe/observe.dart' show ObservableList;
9+
10+
createDiffers(IterableDiffers parent) {
11+
return IterableDiffers.create([const ObservableListDiffFactory()], parent);
12+
}
13+
14+
const binding = const Binding(IterableDiffers,
15+
toFactory: createDiffers, deps: const [ const[IterableDiffers, const SkipSelf()]]);
16+
17+
@Component(
18+
selector: "scroll-app",
19+
bindings: const [binding]
20+
)
21+
@View(directives: const [ScrollAreaComponent, NgIf, NgFor], template: '''
22+
<div>
23+
<div style="display: flex">
24+
<scroll-area id="testArea"></scroll-area>
25+
</div>
26+
<div template="ng-if scrollAreas.length > 0">
27+
<p>Following tables are only here to add weight to the UI:</p>
28+
<scroll-area template="ng-for #scrollArea of scrollAreas"></scroll-area>
29+
</div>
30+
</div>''')
31+
class App {
32+
List<int> scrollAreas;
33+
App() {
34+
var scrollAreas = [];
35+
for (var i = 0; i < 300; i++) {
36+
scrollAreas.add(i);
37+
}
38+
this.scrollAreas = new ObservableList.from(scrollAreas);
39+
}
40+
}

‎modules/examples/src/observable_models/cells.dart

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
library benchmarks.src.naive_infinite_scroll.cells;
2+
3+
import "package:angular2/src/facade/collection.dart"
4+
show List, ListWrapper, Map;
5+
import "common.dart"
6+
show Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST;
7+
import "package:angular2/directives.dart" show NgFor;
8+
import "package:angular2/angular2.dart" show Component, Directive, View;
9+
10+
class HasStyle {
11+
int cellWidth;
12+
HasStyle() {}
13+
set width(int w) {
14+
this.cellWidth = w;
15+
}
16+
}
17+
@Component(
18+
selector: "company-name",
19+
properties: const ["width: cell-width", "company"],
20+
changeDetection: "ON_PUSH_OBSERVE"
21+
)
22+
@View(
23+
directives: const [],
24+
template: '''<div [style.width.px]="cellWidth">{{company.name}}</div>'''
25+
)
26+
class CompanyNameComponent extends HasStyle {
27+
Company company;
28+
}
29+
@Component(
30+
selector: "opportunity-name",
31+
properties: const ["width: cell-width", "opportunity"],
32+
changeDetection: "ON_PUSH_OBSERVE"
33+
)
34+
@View(
35+
directives: const [],
36+
template: '''<div [style.width.px]="cellWidth">{{opportunity.name}}</div>'''
37+
)
38+
class OpportunityNameComponent extends HasStyle {
39+
Opportunity opportunity;
40+
}
41+
@Component(
42+
selector: "offering-name",
43+
properties: const ["width: cell-width", "offering"],
44+
changeDetection: "ON_PUSH_OBSERVE"
45+
)
46+
@View(
47+
directives: const [],
48+
template: '''<div [style.width.px]="cellWidth">{{offering.name}}</div>'''
49+
)
50+
class OfferingNameComponent extends HasStyle {
51+
Offering offering;
52+
}
53+
class Stage {
54+
String name;
55+
bool isDisabled;
56+
String backgroundColor;
57+
Function apply;
58+
}
59+
@Component(
60+
selector: "stage-buttons",
61+
properties: const ["width: cell-width", "offering"],
62+
changeDetection: "ON_PUSH_OBSERVE"
63+
)
64+
@View(directives: const [NgFor], template: '''
65+
<div [style.width.px]="cellWidth">
66+
<button template="ng-for #stage of stages"
67+
[disabled]="stage.isDisabled"
68+
[style.background-color]="stage.backgroundColor"
69+
on-click="setStage(stage)">
70+
{{stage.name}}
71+
</button>
72+
</div>''')
73+
class StageButtonsComponent extends HasStyle {
74+
Offering _offering;
75+
List<Stage> stages;
76+
Offering get offering {
77+
return this._offering;
78+
}
79+
set offering(Offering offering) {
80+
this._offering = offering;
81+
this._computeStageButtons();
82+
}
83+
setStage(Stage stage) {
84+
this._offering.status = stage.name;
85+
this._offering.name = this._offering.name + "!";
86+
this._computeStageButtons();
87+
}
88+
_computeStageButtons() {
89+
var disabled = true;
90+
this.stages = ListWrapper.clone(STATUS_LIST.map((status) {
91+
var isCurrent = this._offering.status == status;
92+
var stage = new Stage();
93+
stage.name = status;
94+
stage.isDisabled = disabled;
95+
stage.backgroundColor = disabled ? "#DDD" : isCurrent ? "#DDF" : "#FDD";
96+
if (isCurrent) {
97+
disabled = false;
98+
}
99+
return stage;
100+
}).toList());
101+
}
102+
}
103+
@Component(
104+
selector: "account-cell",
105+
properties: const ["width: cell-width", "account"],
106+
changeDetection: "ON_PUSH_OBSERVE"
107+
)
108+
@View(directives: const [], template: '''
109+
<div [style.width.px]="cellWidth">
110+
<a href="/account/{{account.accountId}}">
111+
{{account.accountId}}
112+
</a>
113+
</div>''')
114+
class AccountCellComponent extends HasStyle {
115+
Account account;
116+
}
117+
@Component(
118+
selector: "formatted-cell",
119+
properties: const ["width: cell-width", "value"],
120+
changeDetection: "ON_PUSH_OBSERVE"
121+
)
122+
@View(
123+
directives: const [],
124+
template: '''<div [style.width.px]="cellWidth">{{formattedValue}}</div>''')
125+
class FormattedCellComponent extends HasStyle {
126+
String formattedValue;
127+
set value(value) {
128+
if (value is CustomDate) {
129+
this.formattedValue =
130+
'''${ value . month}/${ value . day}/${ value . year}''';
131+
} else {
132+
this.formattedValue = value.toString();
133+
}
134+
}
135+
}

0 commit comments

Comments
 (0)