Last active
March 2, 2017 05:13
-
-
Save ajayvikas/4b65aa99aed5066b18a44b7e11b262a5 to your computer and use it in GitHub Desktop.
Aurelia Grid Column Render Issue
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="./grid"></require> | |
<require from="./grid-column"></require> | |
<h2>Grid Test</h2> | |
<div style="margin-bottom: 20px;"> | |
<button type="button" click.delegate="toggleNameColumn()">${buttonText}</button> | |
</div> | |
<grid items.bind="customers" grid.ref="customerGrid"> | |
<grid-column field="id" title="ID"></grid-column> | |
<grid-column field="name" title="NAME"></grid-column> | |
<grid-column field="state" title="STATE"></grid-column> | |
</grid> | |
</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 {CompositionEngine, CompositionContext, ViewSlot} from 'aurelia-templating'; | |
import {customElement, containerless, computedFrom, inject, declarePropertyDependencies, Container} from "aurelia-framework"; | |
import {Origin} from 'aurelia-metadata' | |
import {Grid} from './grid'; | |
@inject( Element) | |
export class Main { | |
customers = []; | |
customerGrid: Grid; | |
buttonText = "Hide Name"; | |
constructor() { | |
let c = []; | |
c.push({id: 1, name: "Jake", state: "IL"}); | |
c.push({id: 2, name: "Eric", state: "NY"}); | |
c.push({id: 3, name: "Chris", state: "NH"}); | |
this.customers = c; | |
} | |
toggleNameColumn() { | |
this.customerGrid.columns[1].show = !this.customerGrid.columns[1].show; | |
this.buttonText = this.customerGrid.columns[1].show ? "Hide Name" : "Show Name"; | |
} | |
} |
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'; | |
import {GridColumn} from "./grid-column"; | |
@customElement("column-renderer") | |
@containerless() | |
@noView() | |
@inject(Element, ViewCompiler, ViewResources, Container, ViewSlot) | |
export class GridColumnTransclude { | |
@bindable $$item = {}; | |
@bindable column; | |
view = null; | |
cellSlot: ViewSlot; | |
constructor(element: Element, | |
viewComplier, | |
viewResources, | |
container, | |
viewSlot) { | |
this.viewComplier = viewComplier; | |
this.viewResources = viewResources; | |
this.container = container; | |
this.viewSlot = viewSlot; | |
} | |
attached(parentElement) { | |
let context = this.column.bindingContext; | |
this.view = this.column.viewFactory.create(this.container); | |
this.view.bind(this, context); | |
let index = this.column.grid.columns.indexOf(this.column); | |
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
import {customElement, bindable, inject, ViewFactory, ViewCompiler, ViewResources, inlineView} from 'aurelia-framework'; | |
import {Grid} from "./grid"; | |
@inject(Element, Grid, ViewCompiler, ViewResources) | |
@customElement("grid-column") | |
@inlineView('<template><slot></slot></template>') | |
export class GridColumn { | |
@bindable field; | |
@bindable title; | |
@bindable show = true; | |
bindingContext; | |
viewFactory; | |
constructor(element, grid, viewCompiler, viewResources) { | |
this.element = element; | |
this.grid = grid; | |
this.viewCompiler = viewCompiler; | |
this.viewResources = viewResources; | |
let innerHtml = element.innerHTML; | |
if (innerHtml.trim() == "") { | |
let fieldName = element.getAttribute("field"); | |
if (fieldName) | |
innerHtml = `$\{$$item.${fieldName}}`; | |
} | |
let template = `<template><label>${innerHtml}</label></template>`; | |
this.viewFactory = viewCompiler.compile(template, viewResources); | |
} | |
bind(bindingContext) { | |
this.bindingContext = bindingContext; | |
} | |
//showChanged(mew, old) { | |
// if (mew == "true") this.show = true; | |
// if (mew == "false") this.show = false; | |
//} | |
} |
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="./grid-column-renderer"></require> | |
<div> | |
<label repeat.for="column of internalColumns"> | |
${column.title} | |
</label> | |
</div> | |
<div repeat.for="item of items"> | |
<label as-element="column-renderer" repeat.for="column of internalColumns" $$item.bind="item" column.bind="column"></label> | |
</div> | |
<slot></slot> | |
</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, BindingEngine, Disposable} from 'aurelia-framework'; | |
import {GridColumn} from "./grid-column"; | |
@inject(Element, BindingEngine) | |
@customElement("grid") | |
export class Grid { | |
@children("grid-column") columns; | |
@bindable items = []; | |
internalColumns; | |
subscriptions; | |
constructor(element, bindingEngine) { | |
this.element = element; | |
this.bindingEngine = bindingEngine; | |
} | |
attached() { | |
this.internalColumns = this.columns.filter(c => c.show == true); | |
this.subscriptions = this.columns.map(c => this.bindingEngine.propertyObserver(c, "show").subscribe((mew, old) => { | |
this.internalColumns = this.columns.filter(c => c.show == true); | |
})); | |
} | |
detached() { | |
this.subscriptions.forEach(s => s.dispose()); | |
} | |
} |
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> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
label { | |
display: inline-block; | |
width: 50px; | |
border: 1px solid #ddd; | |
} | |
</style> | |
</head> | |
<body aurelia-app> | |
<h1>Loading...</h1> | |
<!-- | |
<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> | |
require(['aurelia-bootstrapper']); | |
</script> | |
--> | |
<script src="https://app-examples.azurewebsites.net/jspm_packages/system.js"></script> | |
<script src="https://app-examples.azurewebsites.net/config.js"></script> | |
<script> | |
System.import('aurelia-bootstrapper'); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment