Giter Site home page Giter Site logo

aurelia / framework Goto Github PK

View Code? Open in Web Editor NEW
11.7K 399.0 632.0 3.18 MB

The Aurelia 1 framework entry point, bringing together all the required sub-modules of Aurelia.

License: MIT License

JavaScript 7.46% TypeScript 92.54%
aurelia-framework javascript typescript single-page-applications framework spa cross-platform web html mobile

framework's Introduction

Aurelia

License: MIT npm version CircleCI TypeScript Twitter

Backers on Open Collective Sponsors on Open Collective Discord Chat

Aurelia 2

This is the Aurelia 2 monorepo, containing core and plugin packages, examples, benchmarks, and documentation for the upcoming major version of everybody's favorite modern JavaScript framework, Aurelia.

Introduction

Aurelia is a modern, front-end JavaScript framework for building browser, mobile, and desktop applications. It focuses on aligning closely with web platform specifications, using convention over configuration, and having minimal framework intrusion. Basically, we want you to just write your code without the framework getting in your way. ๐Ÿ˜‰

Aurelia applications are built by composing a series of simple components. By convention, components are made up of a vanilla JavaScript or Typescript class, with a corresponding HTML template.

//app.js
export class App {
  welcome = "Welcome to Aurelia";

  quests = [
    "To seek the holy grail",
    "To take the ring to Mordor",
    "To rescue princess Leia"
  ];
}
<!-- app.html -->
<form>
  <label>
    <span>What is your name?</span>
    <input value.bind="name & debounce:500">
  </label>

  <label>
    <span>What is your quest?</span>
    <select value.bind="quest">
      <option></option>
      <option repeat.for="q of quests">${q}</option>
    </select>
  </label>
</form>

<p if.bind="name">${welcome}, ${name}!</p>
<p if.bind="quest">Now set forth ${quest.toLowerCase()}!</p>

This example shows you some of the powerful features of the aurelia binding syntax. To learn further, please see our documentation.

Feeling excited? Check out how to use makes to get started in the next section.

Note: Please keep in mind that Aurelia 2 is still in beta. A number of features and use cases around the public API are still untested and there will be a few more breaking changes.

Getting Started

First, ensure that you have Node.js v8.9.0 or above installed on your system. Next, using npx, a tool distributed as part of Node.js, we'll create a new Aurelia 2 app. At a command prompt, run the following command:

npx makes aurelia

This will cause npx to download the makes scaffolding tool, along with the aurelia generator, which it will use to guide you through the setup process. Once complete, you'll have a new Aurelia 2 project ready to run. For more information on Aurelia's use of makes, see here. If you aren't interested in taking our preferred approach to generating a project, you can also see the examples folder in this repo for pure JIT setups (no conventions) with various loaders and bundlers.

Documentation

You can read the documentation on Aurelia 2 here. Our new docs are currently a work-in-progress, so the most complete documentation is available in our getting started section. If you've never used Aurelia before, you'll want to begin with our Quick Start Guide.

Contributing

If you are interested in contributing to Aurelia, please see our contributor documentation for more information. You'll learn how to build the code and run tests, how best to engage in our social channels, how to submit PRs, and even how to contribute to our documentation. We welcome you and thank you in advance for joining with us in this endeavor.

Staying Up-to-Date

To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions, have a look around our Discourse forum. For chat on Aurelia 2, join our new Aurelia 2 community on Discord. If you'd like to join the growing list of Aurelia sponsors, please back us on Open Collective.

License

Aurelia is MIT licensed. You can find out more and read the license document here.

framework's People

Contributors

3cp avatar ahmedshuhel avatar alexander-taran avatar alvarezmario avatar andrew-w-ross avatar ashleygrant avatar atsu85 avatar bigopon avatar ckotzbauer avatar cmichaelgraham avatar dependabot[bot] avatar eisenbergeffect avatar fkleuver avatar gheoan avatar jdanyow avatar jeroenvinke avatar jmerrill avatar jods4 avatar joshmccullough avatar jwahyoung avatar k2s avatar lancelot316 avatar nashwaan avatar niieani avatar plwalters avatar romkevdmeulen avatar sidkh avatar strahilkazlachev avatar vheissu avatar zewa666 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

framework's Issues

Bootstrap Navbar Toggle Not Working

After following the instructions to build the example app, I noticed that when I shrink my browser window, or open the app on my phone, when i click/tap the button to toggle the mobile nav menu, nothing happens. Is anyone else seeing this?

String not interpolated for HTML input attributes maxlength and style

In this markup

<tr repeat.for="searchParam of searchParams">
  <td>
    <input type="text" class="form-control input-sm form-fixer"
        id="${searchParam.FIELDNAME}_low"
        size="${searchParam.LENG}"
        maxlength="${searchParam.LENG}"
        style="width:${searchParam.STYLE.width}px;"
        value.bind='searchParam.LOW'/>
  </td>
</tr>

after the interpolation, the size attribute is processed, the maxlength and style not:

<input type="text" class="form-control input-sm form-fixer au-target" id="VKORG_low" size="4" maxlength="${searchParam.LENG}" style="width:${searchParam.STYLE.width}px;" value.bind="searchParam.LOW">

Tried to change the sequence of attributes, no effect. The LENG type is string.

Nested repeats

Can inner repeat access values of outer repeat and how exactly ? Here is an example I am experimenting with:

this.tabHeader = [{width: 50, name: 'col 1'}, {width: 100, name: 'col 2'}];
this.tabData = [[1, 2], [3, 4]];
<table>
  <thead>
    <tr>
      <th repeat.for="header of tabHeader">${header.name}</th>
    </tr>
  </thead>
  <tbody>
    <tr repeat.for = "line of tabData">
      <td repeat.for="field of line">${field} - ${tabHeader[$index].name</td>
    </tr>
  </tbody>
</table>

In a td element or attribute I need to access the tabHeader value but no luck with constructs tried so far. If I loop over tabHeader in tbody, can't access the line array element:

<tr repeat.for = "line of tabData">
  <td repeat.for="header of tabHeader">${line[$index]} - ${header.name}</td>
</tr>

Shall this work and how, without replicating header data on each line ?

Cannot find where click.trigger is handled in the code?

I was trying to fire double click event. I tried dbclick.trigger="edit()" but with no result. then I tried to look where this is in the code but could not find a line with click keyword. How do I use other events like doubleclick?

Interpolated value not updated when expression contains a function call

In this case the expression gets updated when the value of selected is changed in the view-model.
${selected === selections[0]}

If the expression contains a function call, then the expression is not updated:

${isSelected(selections[0])}

class SomeClass {
  isSelected(selection) {
    return this.selected === selection
  }
}

checkbox is not triggering a change event when updated through binding

template:

<input type="checkbox" id="checkbox2" checked.bind="isChecked" ui-checkbox>

everything works correctly , the browsers checkbox is being updated when the VM property changes

The code in the behavior is simply listening to the checkbox element's onchange event like so :

this.element.addEventListener('change',function(){
      console.log("CHANGE");
});

that event does get triggered when i click the actual checkbox , so it is listening correctly.

i have a button below the checkbox that toggles the VM property and updates the checkbox ,
when that happens the change event is not triggered.

here is a repository that shows this setup:
https://github.com/Aaike/aurelia-test

template:
https://github.com/Aaike/aurelia-test/blob/master/src/welcome.html
behaviour:
https://github.com/Aaike/aurelia-test/blob/master/src/behaviors/ui-checkbox.js

Allow Aurelia to instantiate Custom Elements and Attached Behaviors in the existing body (for MPA)

This is for the use case where a page already exists and has content in the body and we want Aurelia to simply initialize the custom elements and attached behaviors on that page.

A new attribute could be added to the bootstrapper, something like aurelia-app-inline which will cause Aurelia to parse the content in the body rather than using the router to load in page content.

This will likely cause FOUC but this can be prevented by adding a class to the body which will be removed by Aurelia once everything is ready.

The body class could be optional and instead a class can be added to each individual element where FOUC is expected. The class is then also removed by aurelia once the component is created.
This could be done in an attempt to solve the FOUC issue on a per element basis

What would be even better is that the ::unresolved selector for HTML custom elements would work with Aurelia components (similar to http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#gettingstarted)
or maybe https://www.polymer-project.org/docs/polymer/styling.html

But i suppose a simple class is just fine.

${0} not interpolated as number

When using variables that contain the value of 0, the content is not displayed in the view.
${0} should interpolate to the number 0 and not a falsy value.

stylesheets as first class citizens

I would like to see the ability to load and unload stylesheets per view model, treat them with the same importance as html files using a .withStyle() function much like the .withView() function.
The same convention can be used as for the other files by placing the css file right next to the js and html files for each view.
I suppose the same can be done with custom elements and behaviours.

We can currently already do this by using an import statement in each view model
import 'path/to/style.css!'
But using a .withStyle() function would allow us to choose wich style should be used based on some code or some configuration settings (theme/skin based).
And by using the import statement it is not easy to then unload that css when the view is destroyed.

Would also be great if the withStyle() can accept files that need to be precompiled, and perhaps takes care of the compilation in the background.

Documentation update

Hey, the documentation in the site is very poor, you have to do something about this. we all want to use this cool framework but its not possible like this.

Support jspm bundling

The navigation example clocks in at ~140 http requests to load all scripts, so it would be great if it was possible to bundle the framework dependencies using jspm bundle.

Currently this doesn't quite work, because many of the listed jspm dependencies are implicit (never imported by any source files), so those dependencies get skipped in the bundle. For example bundling aurelia-bootstrapper still leaves ~70 http requests for dependencies like core-js, aurelia-templating etc.

I'm not sure if this is an issue with how aurelia handles imports or how jspm bundle works, so feel free to direct me at jspm if that is the proper place to raise this issue.

Ignore "cannot read property 'fuu' of undefined in template"

When doing a binding on the HTML of a property of a nonexistent object(can exist later) it shouldn't throw an error stopping the script execution, it should show nothing instead.

<p>
    ${willExist.fuu}
</p>

throws Uncaught TypeError: Cannot read property 'fuu' of undefined

NPM?

Shouldn't aurelia be published to NPM? For something like node-webkit or atom-shell it would make a lot of sense to import the commonjs modules instead of using ES6 and a compiler.

Unable to clone tools using 'npm install' while behind a corporate proxy

So when I follow the "Getting Started" steps, after downloading the package.json and bower components, I run "npm install". The very first dependency in to clone the tools from the tools github repo. However, when I am behind a corporate proxy, npm only uses the proxy settings to connect to npm, not git. So I receive this error.

npm WARN package.json [email protected] No README data                                                                                        
npm WARN `git config --get remote.origin.url` returned wrong result (git://github.com/aurelia/tools.git)                                                      
npm ERR! git clone git://github.com/aurelia/tools.git Cloning into bare repository 'C:\Users\skoon\AppData\Roaming\npm-cache\_git-remotes\git-github-com-aurel
ia-tools-git-6f523da3'...                                                                                                                                     
npm ERR! git clone git://github.com/aurelia/tools.git fatal: unable to connect to github.com:                                                                 
npm ERR! git clone git://github.com/aurelia/tools.git github.com[0: 192.30.252.130]: errno=No error                                                           
npm ERR! Windows_NT 6.1.7601                                                                                                                                  
npm ERR! argv "C:\\Program Files\\iojs\\\\node.exe" "C:\\Program Files\\iojs\\node_modules\\npm\\bin\\npm-cli.js" "install"                                   
npm ERR! node v1.0.1                                                                                                                                          
npm ERR! npm  v2.1.18                                                                                                                                         
npm ERR! code 128                                                                                                                                             

This causes npm install to halt and not install any other packages, I've tried cloning the tools manually into the root of the project and in to "node_modules" to see if npm install will skip that step and proceed with the other dependencies but I haven't had any luck.

I'm hoping that the next step will be to put the tools into a proper npm package so it can be installed in a normal fashion.

global-behavior is not case sensitive

I tried invoking a jQuery plugin through a global-behavior attribute:

<div jquery.nanoScroller="someProperty: true">Content here</div>

Unfortunately, the DOM returns the attributes in lowercase, so Aurelia tries to execute jQuery.nanoscroller, instead of jQuery.nanoScroller.

Constantly working getter value from view-model to view

Hi, thanks for Aurelia, it looks pretty much!

I found one detail, where I use something like:

<p class="help-block">${fullName | upper}</p>

and in view-model getter like this:

get fullName(){
  console.log('Looping');
  return `${this.firstName} ${this.lastName}`;
}

As result we have some problems with number of invocations of this getter
screen shot 2015-02-04 at 20 24 53

Could Aurelia "bootstrap" an html page from the server?

In one of the apps I'm working on, we use Rails to handle routing. So:

foo.com/bars routes to bars_controller#index and renders views/bars/index.html

I'm using Angular at the moment which allows me to define ng-app on the body element of my Rails layout. This means Angular will bootstrap and parse everything inside the body tag.

Thus, if I had a <bars></bars> element in views/bars/index.html that Rails serves, once Angular kicks in it'll do what's necessary to make that element function.

I know that's not the traditional way to use Angular, as it's more of a library approach rather than a framework (wherein Angular controls routing, views etc).

It works for me at the moment though.

I'm curious to know whether Aurelia could achieve something similar?

Given an index page as follows:

<!doctype html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.baseUrl = 'dist';
      System.import('aurelia-bootstrapper');
    </script>

    This is content served by Rails for instance. I'd like to have aurelia-app act on
    this content as ng-app would.
    It'd mean I could render custom elements in my Rails templates

    <custom foo="bar"></custom>

    Aurelia would bootstrap and sort them out for me.
  </body>
</html>

The way Aurelia currently behaves, is that the app would bootstrap, and the contents of <body> would be replaced by the template from app.html (assuming "get started" setup).

My question, is can you apply the Aurelia app.js view model to the DOM that is already inside the body tag, rendered by Rails?

thank you

just wanted to say thanks for the intro video. noticed it was 2 am on your system clock. also greatful that this is not angular!

Binding to key and enter events?

Hey Rob,

Great work so far on Aurelia, I'm really liking it so far and am in the process of writing an application to get familiar with it.

One silly question: how do I syntactically bind a plain ol' HTML input textbox's afterKeyDown or enterKey event to a function in the ViewModel? KnockoutJS has this type of convention:

<input type="text" data-bind="value:sendMessageText, valueUpdate: 'afterkeydown', enterkey: sendMessage"  />

Does Aurelia something offer something similar that I may have missed in the documentation?

Thanks, hope you and the Durandal.io team keep up the awesome work!

The click.delegate on th element does not find the function

The click.delegate in th element does not find the function (Uncaught Error: headerClick is not a function ast.js:58)

<table id="header" class="table">
    <thead>
        <tr>
            <th repeat.for="header of Headers" click.delegate="headerClick(1)>${header[1]}</th>
        </tr>
    </thead>
</table>

while it works on tr element

<table id="header" class="table">
    <thead>
        <tr click.delegate="headerClick(1)>
            <th repeat.for="header of Headers">${header[1]}</th>
        </tr>
    </thead>
</table>

Documentation Repository

Where do I submit pull requests to fix some mistakes in the documentation? I cannot seem to find a aurelia.github.io repo.

Promises

I've been using Bluebird in some of my other projects to provide support for promises. I'm looking to build a new project using Aurelia and will need support for Promises. Since the whole ECMA6 and 6to5 thing is still so new, I'm struggling to understand the best way to add this to my Aurelia project.

I have the navigation app up and running and wondered if you could provide an example within that app that maybe does something like this:

var Promise = require("bluebird");
var Request = Promise.promisify(require('request'));

function callhttp(host) {

    var cert = " ";

    var options = {
        url: 'https://' + host,
        method: "GET",
        headers: {
            'User-Agent': 'request'
        }
    };

    return Request(options).spread(function (response, body) {
        if (response.statusCode == 200) {
           // console.log(body)
            console.log(response.connection.getPeerCertificate().subject.CN)
            return {
                CN: response.connection.getPeerCertificate().subject.CN,
            };
        } else {
            // Just an example, 200 is not the only successful code
            throw new Error("HTTP Error: " + response.statusCode);
        }
    });
}


var join = Promise.join;
join(
    callhttp("www.google.com"),
    callhttp("www.microsoft.com"),
    callhttp("www.adobe.com"),
    function (first, second, third) {
        console.log([first, second, third]);
    });

View files not resolving correctly if located in jspm_packages

I have finally been able to register my behaviours and custom elements using a plugin.
I have now moved all these files into a seperate package that is installable using jspm.

So the files now live in jspm_packages/github/aaike/[email protected]/* intead of the src folder.
this is mapped as 'aaike': "github:aaike/[email protected]"

i am registering the plugin from the package like this .plugin('aaike/ui-plugin')

This correctly points to the plugin file of the package in the jspm_package dir,
from there javascript files for the behaviours and elements are also resolved correctly

meaning this all works...
except ... when a custom element has a view file...

so all my custom element are working except for the ones that have a html file
The html import does not seems to correctly take the jspm config into account

my js files are correctly resolving like this :
http://localhost:9000/jspm_packages/github/aaike/[email protected]/widgets/editor.js

but the html files are resolving to the dist like this :
http://localhost:9000/dist/github/aaike/[email protected]/widgets/editor.html

so it seems the package name is correctly converted from aaike to github/aaike/[email protected]
but it keeps looking inside the dist directory...

@zewa666 suggesting trying the convertModuleIdToViewUrl method or getViewStrategy
But...
convertModuleIdToViewUrl only seems to works for ViewModels, not for custom elements or behaviours.
and the getViewStrategy also seems to be only for ViewModels

I can change the view file my behaviour or custom element is using with the .useView() method on the metadata behaviour. but this also always uses dist as the baseUrl.

click.delegate event sometimes not triggered

I have the following repeater in my template:

<button click.delegate="$parent.select(nr)" repeat.for="nr of nrs">${nr}</button>

If I define nrs as a getter:

class MyClass
  get nrs() {
    return [1, 2, 3, 4, 5]
  }
  select() {...}
}

When clicking on a button, the select function is sometimes not called.
Everything works just fine, if I define nrs in the constructor.

AMD target - wildcard malfunction

Hmmm... I'm looking at the generated AMD and it seems to me like _exportsWildcard's check is backwards.

It only assigns the export if it isn't undefined. I would think it would assign it if it IS undefined. I found this because Property (and many other items weren't defined on the exports) so it blows up in skeleton-navigation nav-bar when it tries to new up a Property.

If I change the line to === (from !==), it seems to work properly.

Same issue occures in binding repo --> here

jspm issue installing the nav-demo

Hi, I was able to get the basic onstallation on the demo completed through npm install, but when I try the jspm command, I get the following (I noticed skonn had this issue in #6, but it was partway down the thread, and not specifically addressed):

C:\Users\jeff\WebstormProjects\AureliaDemo>jspm install -y
Creating registry cache...

err Error locating jspm:aurelia-bootstrapper
ReferenceError: ui is not defined

warn Installation changes not saved.

C:\Users\jeff\WebstormProjects\AureliaDemo>

Two-way binding calls setter when property was updated from code

Think of this simple demo:

<!-- app.html -->
<template>
  <input type="checkbox" checked.bind="isChecked">
  <button click.delegate="activateCheckedState()">set checked</button>
</template>
<!-- app.js -->
export class App {
  constructor() { 
    this._isCheckedState = false;
  }

  activateCheckedState() {
    this.isChecked = true; // #1 will call the isChecked setter first and once
  }

  set isChecked(value) {
    console.log("Set: " + value);
    this._isCheckedState = value;
  }

  get isChecked() { 
    return this._isCheckedState; // #2 dirty-checking will find updated value and updates UI
  }
}

Running this will result in two console log entries:

Set: true
Set: true

When clicking the button:

  1. activateCheckedState calls the isChecked setter directly
  2. isChecked setter in turn updates inner _isCheckedState
  3. dirty-checking is watching the isChecked getter and finds a new value after some time (see #25)
  4. this updates the actual binding. Hence the check box gets checked.
  5. but this again publishes a notification to call the isChecked setter

This is confusing IMHO.

Accessing $parent variable in template binding is not working on repeat item

I can't access parent variable in repeat item

app.html

<li repeat.for="todo of todos" class="${todo.completed ? 'completed' : ''}">
                <div class="${($parent.editedTodo) == todo ? 'editing' : ''}">
                    <div class="view" >
                        <input class="toggle" type="checkbox" checked.bind="todo.completed" change.delegate="$parent.todoChanged()">
                        <label dblclick.delegate="$parent.editTodo(todo)">${todo.title}</label>
                        <button class="destroy" click.delegate="$parent.removeTodo(todo)"></button>
                    </div>
                    <form submit.delegate="saveEdits(todo, 'submit')">
                        <input class="edit" value.bind="todo.title">
                    </form>
                </div>
            </li>

app.js

export class Todo{
  static inject() { return []; }
  constructor(){
    this.newTodo = '';
    this.todos = [];
    this.remainingCount = 0;
    this.editedTodo = {title: '', completed: false};
  }

  addTodo() {
    this.todos.push({
      title: this.newTodo,
      completed: false
    });
    this.todoChanged();
    this.newTodo = '';
  }

  removeTodo(todo) {
    var idx = this.todos.indexOf(todo);
    this.todos.splice(idx, 1);
    this.todoChanged();
  }

  editTodo(todo) {
    this.editedTodo = todo;
  }

$parent.editedTodo is making the app stopped

indexeddb

Can form data be easily stored
/retrieved (crud) in inindexeddb using Auerelia and maybe dexie.js as the wrapper... looking at offline app development for mobile devices.

Windows/NTFS - Path to long

Following the "Get Started" guide, using the example package.json file, npm creates a directory structure which seems to big for Windows/NTFS filesystem to handle.

Example:

D:\aureliatest\node_modules\conventional-changelog\node_modules\lodash.assign\node_modules\lodash._basecreatecallback\node_modules\lodash.bind\node_modules\lodash._createwrapper\node_modules\lodash._basecreatewrapper\node_modules\lodash._basecreate...

Calling function from repeat item

Hi, how do I call removeTodo from repeat.for todo of todos. I've made removeTodo function in app.js but when calling it from repeat.for it says that removeTodo is not defined.

app.html

        <li class="${todo.completed ? 'completed' : ''}" repeat.for="todo of todos">
                <div class="view">
                    <input class="toggle" type="checkbox" change.delegate="addTodo()" checked.bind="todo.completed">
                    <label>${todo.title}</label>
                    <button class="destroy" click.delegate="removeTodo(todo)"></button>
                </div>
                <input class="edit" value.bind="todo.title">
            </li>

app.js

export class Todo{
  static inject() { return []; }
  constructor(){
    this.newTodo = '';
    this.todos = [];
    this.remainingCount = 0;
  }

  addTodo() {
    this.todos.push({
      title: this.newTodo,
      completed: false
    });
    this.todoChanged();
    this.newTodo = '';
  }

  removeTodo(todo) {
    var idx = todos.indexOf(todo);
    todos.splice(idx, 1);
    this.todoChanged();
  }
...

browser support

What browsers is Aurelia targeting ? is it IE9+ ?
couldn't seem to find anything on browser support in the docs

aurelia-http-client example

Hi,

I'm looking for a decent SPA framework for small internal project. I've wasted hours trying to get my head around Ember.js, Angular.js. Being new to SPA's both of these frameworks seem like a massive overkill for me, not to mention the complexity especially with Ember. They both seem like their trying to be all things to all men.

So Aurelia looks very interesting, except for the dependancy injection bit, which I'm struggling to get my head around.

import {HttpClient} from 'aurelia-http-client';

export class WebAPI {
    static inject() { return [HttpClient]; }
    constructor(http){
        this.http = http;
    }

    return getAllContacts(){
        return this.http.get('uri goes here');
    }
}

Would you mind providing a simple working example of this (just a simple HTTP GET) in the "getting started" navigation-app to help me understand how to splice things together?

Ultimately my app will need to make multiple HTTP requests and then correlate the returned data in order so I'll need to include the ability to deal with promises too.

Thanks for what could be a productivity game changer.

detect jspm app name configuration for html templates

Here is my jspm custom configuration in my package.json.

{
  "jspm": {
    "name": "my-app",
    "directories": {
      "baseURL": "src",
      "lib": "src/app",
      "packages": "vendor"
    },
    "dependencies": {
      "aurelia-bootstrapper": "^0.9.1"
    }
  }
}

Application scripts are in the app folder(e.g. app.js) and when I want to import them they are prefixed with 'my-app', like import {App} from 'my-app/app';. So I had to add my app module to the aurelia-app attribute: aurelia-app='my-app/app' and it worked, my app script is being imported, the problem is with the associated template, it tries to download it from /my-app/app.html but it's in /app/app.html.
I fixed it for now implementing getViewStrategy and returning an absolute path to my view but I think this should be considered.

Gitter chat

What about connecting to gitter chat?

https://gitter.im/

This is perfect solution for stages like this one. So many questions. Let's create a room there and create Aurelila developers community from start.

Bluebird optional plugin

Please consider Bluebird as an optional plugin.

Offers greating debugging while development.
Is able to automatically create promises from callbacks.
Error handling.
Faster than native promises.

Stak with events.

Here I am again working on todo app.

Here is my HTML part todo.html

  <div class="row">
    <div class="col-md-10">
      <input type="text" class="input-lg form-control" value.bind="newtask"/>
    </div>
    <div class="col-md-2">
    <button click.trigger="add()" class="btn btn-primary btn-lg btn-block">Add</button>
    </div>
  </div>
<li class="list-group-item  ${task.done ? 'list-group-item-warning' : ''}" repeat.for="task of tasks">
  <label dblclick.trigger="edit(task)">
    <input type="checkbox" checked.bind="task.done"/>
    ${task.name}
  </label>
</li>

and here is todo.js

export class Todo{
  constructor(){
    this.tasks = [{name: 'Task 1', done: 0}];
  }

  edit(task) {
    console.log(task);
  }

  add() {
    if(!this.newtask) {
      return;
    }
    this.tasks.push({name: this.newtask, done:0});
    this.newtask = '';
  }
}

The strange thing which I cannot understand is that click.trigger="add()" is working and dblclick.trigger="edit(task)" is not. It says edit is not a function. I also tried dblclick.delegate="edit(task)" but same result.

What do I do wrong?

Allow HTML5 custom elements to be registered with aurelia

For simple components that can work with the HTML5 custom elements API we could have a custom metadata function that is not dependent on the Behavior of the aurelia-templating repo.

The custom elements can be written like this :

class TestComponent {
    static metadata() {
        return {
            type: "CustomElement"
        }
    }

    static inject() { return [Element]; }
    constructor(element) {
        console.log('component constructed', element);
    }
}

For HTML5 the type could be set to CustomElement or TypeExtension
With a type extension you would also have to specify a extends property

We can make this work with HTML5 by registering it using document.registerElement and do a very simple DI to get the Element in the constructor function when an instance is created.

To allow this same code to be re-used with aurelia there could be a hook that allows us to transform the plain object metadata into one that Aurelia expects.

This is by no means an issue or important feature :) but rather a nice to have

Difficult/Impossible to debug issues

Because most problems end up getting caught in app-router.js I'm finding it very difficult to debug the cause of mistakes I've made (in fact my current one is impossible to debug).

Either I'm requesting that there be a small documentation section on debugging issues that are caught by the router OR a change so that we can see the actual source of issues.

Trigger event when Aurelia is fully loaded

I'd like to integrate E2E tests with Protractor for Aurelia. So far everything fine, but I somehow need to wait for the page to finish loading. So far a browser.sleep would help but it feels dirty.

So in the end it would be nice if Aurelia could trigger some kind of dom event to notify protractor that its done loading.

As a test I put following attached code into the app.js of the Skeleton App:

attached() {
    var evt = document.createEvent('Event');
    evt.initEvent('AureliaLoaded', true, true);

    setTimeout(
      () => { document.dispatchEvent(evt); },
      2000);
}

and my protractor test now looks like this:

describe('aurelia skeleton app', function() {
  beforeEach( function() {
    browser.ignoreSynchronization = true;
    browser.get('http://localhost:9000/app');

    browser.executeAsyncScript(
      'var cb = arguments[arguments.length - 1];' +
      'document.addEventListener("AureliaLoaded", function (e) {' +
      '  cb("SPA fully loaded")' +
      '}, false);'
    ).then(function(result){
        console.log(result);
    });
  });

  it('should load the page', function() {
    expect(browser.getTitle()).toBe('Welcome | Aurelia');
  });
});

As you can see the beforeEach will now execute an AsyncScript to wait for the custom Event and thus preventing the tests from starting before Aurelia is done.

So maybe the automated bootstrapper could now issue such an event and we are good to go.

IRC Channel

Hey, do you guys have an IRC channel yet? If so - what is it?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.