angular2
Version:
Angular 2 - a web framework for modern web apps
1 lines • 2.87 kB
Source Map (JSON)
{"version":3,"sources":["query_list.js"],"names":[],"mappings":"AAAA,KAAO,EAAC,aAAY,CAAC,KAAO,oBAAkB,CAAC;AAoE/C,KAAO,MAAM,UAAQ,QAAU,cAAY;AAIzC,SAAO,CAAE,QAAO,CAAG;AACjB,SAAO,CAAA,KAAI,SAAS,AAAC,CAAC,QAAO,CAAC,CAAC;EACjC;AAAA,AAIA,eAAa,CAAE,QAAO,CAAG;AACvB,SAAO,CAAA,KAAI,eAAe,AAAC,CAAC,QAAO,CAAC,CAAC;EACvC;AAAA,AAEF;AAAA","file":"angular2/src/core/compiler/query_list.es6","sourcesContent":["import {BaseQueryList} from './base_query_list';\n\n/**\n * An iterable live list of components in the Light DOM.\n *\n * Injectable Objects that contains a live list of child directives in the light DOM of a directive.\n * The directives are kept in depth-first pre-order traversal of the DOM.\n *\n * The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop as well as in\n * template with `*for=\"of\"` viewport.\n *\n * NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain list of observable\n * callbacks.\n *\n * # Example:\n *\n * Assume that `<tabs>` component would like to get a list its children which are `<pane>` components as shown in this\n * example:\n *\n * ```html\n * <tabs>\n * <pane title=\"Overview\">...</pane>\n * <pane *for=\"o in objects\" [title]=\"o.title\">{{o.text}}</pane>\n * </tabs>\n * ```\n *\n * In the above example the list of `<tabs>` elements needs to get a list of `<pane>` elements so that it could render\n * tabs with the correct titles and in the correct order.\n *\n * A possible solution would be for a `<pane>` to inject `<tabs>` component and then register itself with `<tabs>`\n * component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this would only work\n * partialy since `*for` could rearange the list of `<pane>` components which would not be reported to `<tabs>`\n * component and thus the list of `<pane>` componets would be out of sync with respect to the list of `<pane>` elements.\n *\n * A prefferd solution is to inject a `QueryList` which is a live list of directives in the component`s light DOM.\n *\n * ```javascript\n * @Component({\n * selector: 'tabs'\n * })\n * @View({\n * template: `\n * <ul>\n * <li *for=\"pane of panes\">{{pane.title}}</li>\n * </ul>\n * <content></content>\n * `\n * })\n * class Tabs {\n * panes: QueryList<Pane>\n *\n * constructor(@Query(Pane) panes:QueryList<Pane>) {\n * this.panes = panes;\n * }\n * }\n *\n * @Component({\n * selector: 'pane',\n * properties: ['title']\n * })\n * @View(...)\n * class Pane {\n * title:string;\n * }\n * ```\n *\n * @exportedAs angular2/view\n */\nexport class QueryList extends BaseQueryList {\n\n /**\n */\n onChange(callback) {\n return super.onChange(callback);\n }\n\n /**\n */\n removeCallback(callback) {\n return super.removeCallback(callback);\n }\n\n}\n"]}