标签: aurelia

我听说VS 2015支持新的js语法但是当我在这个IDE中打开一个使用aurelia.js编写的项目时,intellisense会抱怨很多很多东西,例如.

export class UpperValueConverter {
  toView(value){
    return value && value.toUpperCase();
  }
}

我安装了WebEssentials 2015.似乎仍然没有任何工作...可能一个重要的信息是我目前的VS安装是一个新的,所以我没有弄乱任何设置.

我以为我试图做一些非常简单的事情,但我无法做到这一点.整个例子都是关于plunkr

我有一个非常基本的自定义元素,@bindable它显示一个数据成员,它显示并监视已更改的事件.它看起来像这样:

import {bindable} from "aurelia-framework";
export class ChildElementCustomElement {  
  @bindable childData;  
  childDataChanged(value) {
    alert("Child Data changed " + value);
  }  
}

和观点:

<template>
  <div style="border: solid 1pt green;">
    <h2>This is the child</h2>
    This is the child data : ${childData}
  </div>
</template>

父级显示子元素,但我希望其视图模型中的成员绑定到子级,因此父成员中的任何更改都会自动反映在子级中.这是父代码:

import {bindable} from "aurelia-framework";
export class App {
  parentData = "this is parent data";
}

和观点:

<template>
  <h1>Two-way binding between parent and child custom elements</h1>
  <require from="./child-element"></require>  
  <child-element childData.bind="parentData"></child-element>  
  <hr/>  
  <label>The following is the …

我已经在Aurelia-CLI开发了大约3个月并且喜欢它到目前为止.我认为这是一个坚实的框架,显然在支持和使用方面不断升级.这是好事!

在我开发更多大型应用程序之前,我想知道我是否使用了最好的构建系统.我只尝试过Aurelia-CLI,并不熟悉Webpack或JSPM,因此我不知道我缺少什么.使用其他两个构建系统中的任何一个是否有任何明显的优点或缺点,或者使用CLI是最干净和最受支持的方法？由于我是独立开发的,所以我没有任何外部限制.

谢谢你的帮助.

我正在为我的项目使用Aurelia骨架.一切看起来都很直观,但是我遇到了一个我怀疑相当容易的问题(如果你知道的话).

问题是app.html/app.js最初显示导航栏并加载一些默认样式.

现在我需要一个登录页面,它不会加载任何东西,除了它自己的样式,没有导航栏没有任何东西 - 只是它自己的登录表单.

所以我尝试过这样的事情:

app.js

<template>
    <div if.bind="auth.isNotAuthenticated()">
        <require from="components/login/index" ></require>
        <login router.bind="router"></login>
    </div> 
    <div if.bind="auth.isAuthenticated()">
        <require from="nav-bar.html" ></require>
        <require from="../styles/styles.css"></require>
        <div class="container" id="banner">
            <div class="row">
                <img src="images/logo.png" />
            </div>
        </div>
        <nav-bar router.bind="router"></nav-bar>
        <div class="page-host">
            <router-view></router-view>
        </div>
    </div>
</template>

显然这不起作用(除非你刷新页面/ f5),因为app.js/app.html是始终存在且永不改变的根路由.但我希望标记中的逻辑有助于说明我想要解决的问题？

我猜我只知道当我从登录路线(登录成功)导航到另一条路线时,如何重新加载父路线(app.js).当我退出时,父路线(app.js)也应该再次刷新.然后我的所有问题都将得到解决.

我在这里错过了什么？:-)

我想我有:

<template>
  <!-- some code here -->
  <div>
    <div repeat.for="item of arr">
      <label for.bind="item.id">${item.name}</label>
    </div>
    <div repeat.for="item of arr">
      <input type="text" id.bind="item.id" value.bind="item.value" />
    </div>
  </div>
  <!-- more code here -->
</template>

让我们假设arr我的ViewModel 的属性是:

arr = [
  { id: 'txtID', name: 'ID', value: '' },
  { id: 'txtFirstName', name: 'First Name', value: '' },
  { id: 'txtLastName', name: 'Last Name', value: '' }
];

Aurelia会像这样呈现:

<!-- some code here -->
<div>
  <div>
    <label for='txtID'>ID</label>
  </div>
  <div>
    <label for='txtFirstName'>First …

当导出作为aurelia中的视图模型的es6类时,我似乎能够在构造函数和激活函数中设置初始化代码.

这里有标准的约定吗？

我应该在一个而不是另一个中进行某些初始化吗？

用户没有实现es6类的激活功能吗？

所以我把我的auth课注入了我的main.js:

import {Auth} from 'auth';
import {inject} from 'aurelia-framework';

@inject(Auth)
export class App {
    constructor(auth) {
        this.auth = auth;
    }

    get isLoggedIn() { return this.auth.isLoggedIn; }
}

所以在我的 app.html

<form>
    <!-- form login elements -->
</form>

如何根据我的app getter函数有条件地显示此元素.

我正在使用Aurelia Framework,Typescript并且event aggregator我能够发布和订阅频道.

问题是我无法取消订阅频道.

注意:所有形式的subscribe方法都返回一个dispose函数.您可以调用此函数来处理订阅并停止接收消息.如果由路由器管理,则处置视图模型的停用回调的好地方,或者如果它是任何其他视图模型,则在其分离的回调中.

这取自aurelia官方文档网站,我似乎并不了解如何实现这一点.

我进入了aurelia gitter频道,我找到了3个关于此的讨论,其中一个给出了以下取消订阅的示例:

sub = ea.subscribe();

//unsubscribe the event
sub();

问题是此代码在TypeScript中不起作用.

如何取消订阅event aggregator打字稿？

现在,使用此代码

    @inject(Publisher, Subscriber)
export class Home {
    publisher: Publisher;
    subscriber: Subscriber;
    channelName = "testChannel";

    constructor(pub: Publisher, sub: Subscriber) {
        this.publisher = pub;
        this.subscriber = sub;

        this.subscriber.subscribe(this.channelName);

        this.publisher.publish(this.channelName, "Ana are mere");
    }
}


@inject(EventAggregator)
export class Publisher {
    eventAggregator: EventAggregator = null;

    constructor(agg: EventAggregator) {
        this.eventAggregator = agg;
    }

    publish(channelName: string, …

我有以下代码用于显示模态:

app.html

<a click.delegate="setModal('person-information')">Test</a>

<modal>
    <modal-header title.bind="'View Person'"></modal-header>
    <modal-body content.bind="contentModal"></modal-body>
    <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>

app.js

setModal(modal) {
    this.contentModal = modal;
    $('.modal').modal();
}

人,information.html

<template>
    <form role="form">
        <div class="form-group">
            <label for="fn">First Name</label>
            <input type="text" value.bind="person.firstName" class="form-control" id="fn" placeholder="first name">
        </div>
        <div class="form-group">
            <label for="ln">Last Name</label>
            <input type="text" value.bind="person.lastName" class="form-control" id="ln" placeholder="last name">
        </div>
    </form>
</template> 

人,information.js

import {bindable, inject} from 'aurelia-framework';

@inject(Element)
export class PersonInformation {  
    constructor() {
        this.person = new Person();
    }
}

class Person{  
    firstName = 'Patrick';
    lastName = 'Bateman'; …

任何人都可以逐步解释,我们如何从Aurelia的URL中删除#