Last active
October 2, 2016 23:10
-
-
Save ajayvikas/0a64de7c329a40154f5bcf888bea8026 to your computer and use it in GitHub Desktop.
Slot Issue - @child is not being populated in the dynamic component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="./summary"></require> | |
| <require from="./dynamic-comp"></require> | |
| <summary items.bind="summaryItems"> | |
| <span style="background-color: skyblue">from app:</span> | |
| </summary> | |
| <dc></dc> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class Main { | |
| summaryItems = ["music", "sports", "reading", "history"]; | |
| constructor() { | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {inject, customElement, children, bindable, ViewCompiler, ViewFactory, | |
| ViewResources, Container, ViewSlot, noView, inlineView, containerless} from 'aurelia-framework'; | |
| @inject(Element, ViewCompiler, ViewResources, Container, ViewSlot) | |
| @customElement("dc") | |
| export class DynamicContent { | |
| constructor(element, viewCompiler, viewResources, container, viewSlot) { | |
| this.element = element; | |
| this.viewCompiler = viewCompiler; | |
| this.viewResources = viewResources; | |
| this.container = container; | |
| this.viewSlot = viewSlot; | |
| let html = `<summary id="sum2" items.bind="summaryItems" class="au-target" au-target-id="20"> | |
| <span style="background-color: lightgray">from dc:</span> | |
| </summary>`; | |
| let template = `<template>${html}</template>`; | |
| this.viewFactory = viewCompiler.compile(template, viewResources); | |
| } | |
| bind(bindingContext,overrideContext) { | |
| this.bindingContext = bindingContext; | |
| } | |
| attached() { | |
| console.log2("Firing Attached from Dynamic Component"); | |
| let context = this.bindingContext; | |
| this.view = this.viewFactory.create(this.container); | |
| this.view.bind(this, context); | |
| this.viewSlot.add(this.view); | |
| this.viewSlot.attached(); | |
| } | |
| detached() { | |
| this.viewSlot.detached(); | |
| this.viewSlot.remove(this.view); | |
| this.view.unbind(); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <style> | |
| span { | |
| margin-right: 10px; | |
| max-width: 300px; | |
| display: inline-block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| </style> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <div aurelia-app> | |
| <h1>Loading...</h1> | |
| </div> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <div style="font-weight: bold">Log</div> | |
| <div id="log"></div> | |
| <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> | |
| <script> | |
| createSpan = function(arg) { | |
| if (arg instanceof Node) arg = arg.outerHTML; | |
| var span = document.createElement("span"); | |
| span.appendChild(document.createTextNode(arg ? arg : 'undefined')); | |
| if (!arg) span.style.fontWeight = "bold"; | |
| return span; | |
| } | |
| console.log2 = function () { | |
| var args = arguments; | |
| var newDiv = document.createElement("div"); | |
| newDiv.style.borderTop = "1px solid #ddd"; | |
| if (args.length > 0) newDiv.appendChild(createSpan(args[0])); | |
| if (args.length > 1) newDiv.appendChild(createSpan(args[1])); | |
| if (args.length > 2) newDiv.appendChild(createSpan(args[2])); | |
| if (args.length > 3) newDiv.appendChild(createSpan(args[3])); | |
| document.getElementById("log").appendChild(newDiv); | |
| } | |
| require(['aurelia-bootstrapper']); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <slot></slot> | |
| <span repeat.for="item of items"> | |
| <template if.bind="$last==true">${item}</template> | |
| <template if.bind="$last==false">${item},</template> | |
| </span> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {inject, customElement, children, child, bindable, BindingEngine, Disposable} from 'aurelia-framework'; | |
| @inject(Element) | |
| export class Summary { | |
| @bindable items; | |
| @child("span") header; | |
| constructor(element) { | |
| this.element = element; | |
| this.items = []; | |
| } | |
| bind(bindingContext,overrideContext) { | |
| //console.log('bind - summary'); | |
| } | |
| attached() { | |
| var useType = this.element.parentElement.tagName == "DC" ? "Dynamic Use:" : "Static Use:"; | |
| console.log2("From Summary Comp", useType, "header-value", this.header); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment