93 lines
2.1 KiB
JavaScript
93 lines
2.1 KiB
JavaScript
|
(function(app) {
|
||
|
|
|
||
|
|
app.heroQueries = app.heroQueries || {};
|
||
|
|
|
||
|
|
app.heroQueries.ContentChildComponent = ng.core.Component({
|
||
|
|
selector: 'content-child',
|
||
|
|
template:
|
||
|
|
'<span class="content-child" *ngIf="active">' +
|
||
|
|
'Active' +
|
||
|
|
'</span>'
|
||
|
|
}).Class({
|
||
|
|
constructor: function ContentChildComponent() {
|
||
|
|
this.active = false;
|
||
|
|
},
|
||
|
|
|
||
|
|
activate: function() {
|
||
|
|
this.active = !this.active;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
////////////////////
|
||
|
|
|
||
|
|
// #docregion content
|
||
|
|
app.heroQueries.ViewChildComponent = ng.core.Component({
|
||
|
|
selector: 'view-child',
|
||
|
|
template:
|
||
|
|
'<h2 [class.active]=active>' +
|
||
|
|
'{{hero.name}} ' +
|
||
|
|
'<ng-content></ng-content>' +
|
||
|
|
'</h2>',
|
||
|
|
styles: ['.active {font-weight: bold; background-color: skyblue;}'],
|
||
|
|
inputs: ['hero'],
|
||
|
|
queries: {
|
||
|
|
content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.Class({
|
||
|
|
constructor: function HeroQueriesHeroComponent() {
|
||
|
|
this.active = false;
|
||
|
|
},
|
||
|
|
|
||
|
|
activate: function() {
|
||
|
|
this.active = !this.active;
|
||
|
|
this.content.activate();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// #enddocregion content
|
||
|
|
|
||
|
|
////////////////////
|
||
|
|
|
||
|
|
// #docregion view
|
||
|
|
app.heroQueries.HeroQueriesComponent = ng.core.Component({
|
||
|
|
selector: 'hero-queries',
|
||
|
|
template:
|
||
|
|
'<view-child *ngFor="let hero of heroData" [hero]="hero">' +
|
||
|
|
'<content-child></content-child>' +
|
||
|
|
'</view-child>' +
|
||
|
|
'<button (click)="activate()">{{buttonLabel}} All</button>',
|
||
|
|
queries: {
|
||
|
|
views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.Class({
|
||
|
|
constructor: function HeroQueriesComponent() {
|
||
|
|
this.active = false;
|
||
|
|
this.heroData = [
|
||
|
|
{id: 1, name: 'Windstorm'},
|
||
|
|
{id: 2, name: 'LaughingGas'}
|
||
|
|
];
|
||
|
|
},
|
||
|
|
|
||
|
|
activate: function() {
|
||
|
|
this.active = !this.active;
|
||
|
|
this.views.forEach(function(view) {
|
||
|
|
view.activate();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// #docregion defined-property
|
||
|
|
// add prototype property w/ getter outside the DSL
|
||
|
|
var proto = app.heroQueries.HeroQueriesComponent.prototype;
|
||
|
|
Object.defineProperty(proto, "buttonLabel", {
|
||
|
|
get: function () {
|
||
|
|
return this.active ? 'Deactivate' : 'Activate';
|
||
|
|
},
|
||
|
|
enumerable: true
|
||
|
|
});
|
||
|
|
// #enddocregion defined-property
|
||
|
|
// #enddocregion view
|
||
|
|
|
||
|
|
})(window.app = window.app || {});
|