Aurelia TypeScript Samples

pwkad-aurelia-samples

repo - @PWKad Samples with visual studio (using requirejs amd module loader)

Steps to get running:

  1. View running project
  2. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

    TypeScript 1.5 is included in this install.

  3. Run Visual Studio 2015
  4. Open solution in skel-nav-esri-vs-ts
  5. Run solution using chrome, firefox, or IE

Some background on the sample:

dynamic layout (view) (view model)

pwkad layout

supports drag drop for reordering items in a column

supports reordering underlying collection when you drag & drop

pwkad layout drag drop working

bootstrap modal dialog (view) (modal view)

pwkad bootstrap modal

markdown editor / attached behavior

markdown works

uses attached behavior strategy

updates innerHTML when the value property it exposes, changes

import the attached behavior and bind it to the editor text

<template>
    <import from='./markdown-component'></import>

    <div class="container-fluid">
        <h2>Markdown Editor</h2>
        <div class="row">
            <div class="col-sm-6">
                <textarea type="text" value.bind="myMarkdownText" class="form-control" rows="20"></textarea>
            </div>
            <div class="col-sm-6">
                <div markdown-component.bind="myMarkdownText"></div>
            </div>
        </div>
    </div>
</template>

register the valueChanged event

export class MarkdownComponentAttachedBehavior {
    static metadata() {
        return auf.Behavior
            .attachedBehavior('markdown-component')
            .withProperty('value', 'valueChanged', 'markdown-component');
    }

handle the valueChanged event

    valueChanged(newValue) {
        this.element.innerHTML = this.conv.makeHtml(
            newValue.split('\n').map((line) => line.trim()).join('\n')
            );
        prism.highlightAll(this.element.querySelectorAll('code'));
    }