我正在Aurelia写一个非常简单的数据网格自定义元素,部分用于我需要的功能,部分用于学习Aurelia.它进展顺利,但我仍然坚持如何获取自定义组件中元素的内容.

这是我的代码,问题的其余部分如下:

数据grid.js

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

export class DataGridCustomElement {
  @bindable data = [];
  @bindable height = '';

  columns = [];

  bind() {
    this.sort(this.columns[0].property);
  }

  sort(property) {
    if (property == this.sortProperty) {
      this.sortDirection = !this.sortDirection;
    }
    else {
      this.sortProperty = property;
      this.sortDirection = true;
    }
    let data = _.sortBy(this.data, this.sortProperty);
    if (!this.sortDirection) {
      data = data.reverse()
    }
    this.data = data;
  }
}

@inject(DataGridCustomElement)
export class DataGridColumnCustomElement {
  @bindable title = '';
  @bindable width = …

代码:

App.js

export class App {
  constructor() {
    this.widgets = [{ name: 'zero'}, {name: 'one'}, {name:'two'}];
    this.shipment = { widget: this.widgets[1] };
  }
}

App.html

<template>
  <require from="./widget-picker"></require>
  <require from="./some-other-component"></require>

  <widget-picker widget.bind="shipment.widget" widgets.bind="widgets"></widget-picker>
  <some-other-component widget.bind="shipment.widget"/>
</template>

窗口小部件,picker.js

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

export class WidgetPicker {
  @bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'widgetChanged'  }) 
  widget;

  @bindable widgets;

  widgetChanged(widget) {
      // Use an Event Aggregator to send a message to SomeOtherComponent
      // to say that they should check their widget binding for updates. …

给出app.html的以下布局:

<template>
  <require from="nav-bar.html"></require>
  <require from="bootstrap/css/bootstrap.css"></require>

  <nav-bar router.bind="router"></nav-bar>
  <div id="sidebar"><h3>This is the sidebar.</h3></div>

  <div id="page-host" class="page-host">
    <router-view></router-view>
  </div>
</template>

如何在nav-bar.html中绑定toggleSidebar函数(从app.js导出)？

<template bindable="router">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      ....

      <a class="navbar-brand" href="#" click.trigger="toggleSidebar()">
        <i class="fa fa-bars"></i>
        <span>${router.title}</span>
      </a>
    </div>

    ....
  </nav>
</template>

目前,当我点击toggleSidebar链接时出现以下错误:

"toggleSidebar不是一个函数".

我需要在Aurelia创建一个只接受电话号码的输入.如果用户键入1234567890此输入,则应显示(123) 456-7890该值并将绑定变量设置为1234567890.如果用户也(123) 456-7890输入输入,结果应该相同.如果用户在输入中键入字母,则输入不应显示字母,也不应更新绑定的javascript变量.

我可以使用ValueConverter部分实现这一点:

phone.ts

export class PhoneValueConverter {
    private removeNonDigits(input) {
        let digits = '';

        // Remove non-digits. i.e. '(', ')', ' ' and '-'
        for (let i = 0; i < input.length; i++) {
            let char = input.charAt(i);

            if ('0' <= char && char <= '9')
                digits += char;
        }

        return digits;
    }

    toView(value) {
        if (!value)
            return value;

        value = this.removeNonDigits(value);

        let formatted = '(' + value.substring(0, 3);

        if …

我正在尝试创建一个易于重用的下拉组件。我想知道是否可以做这样的事情：

<dropdown title.bind="Projects"></dropdown>

注意，我传递的是字符串“ Projects”而不是JS对象。然后我的下拉模板有：

<template>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">${title}</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
</template>

当然，我还没有在演示代码中循环下拉列表项（将来要做）。请注意，我正在<a>${title}</a>模板中尝试使用标题。

如何通过Aurelia中的属性将对象传递给自定义组件？

我的自定义组件类如下所示:

import {bindable} from 'aurelia-framework';

export class PageHeading {
    @bindable title = '';
    @bindable subTitle = '';
    @bindable path;

    constructor() {
        console.log('page heading...' + this.subTitle);
    }

    created() {
        console.log('created.. ', this.path);
    }
}

在一个html文件中,我使用这样的组件:

<page-heading title="Dashboard" sub-title="your starting point" path="${path}"></page-heading>

这适用于像title和的字符串subTitle,但我不知道如何将对象传递给组件.这可能吗？如果是这样,我怎么能在Aurelia做到这一点？

我所知道的click.trigger,以及click.delegate其做工精细.但是,如果我想分配一个click事件,只有在点击具有该属性的确切元素时才会触发该怎么办？

我可能会做这样的事情,因为它是"正常的"JS:

el.addEventListener('click', function (e) {
    if (e.target === el) {
        // continue...
    }
    else {
        // el wasn't clicked directly
    }
});

是否已经存在这样的属性,或者我是否需要自己创建一个属性？如果是这样,我希望它与其他类似,类似于click.target="someMethod()".我怎么能做到这一点？

编辑:我尝试过这个不起作用,因为回调函数this指向自定义属性类 - 而不是使用属性类的元素;

import { inject } from 'aurelia-framework';

@inject(Element)
export class ClickTargetCustomAttribute {
    constructor (element) {
        this.element = element;

        this.handleClick = e => {
            console.log('Handling click...');

            if (e.target === this.element && typeof this.value === 'function') {
                console.log('Target and el are same and value is function …

我正在按照结构来实现Sean Hunter博客的工具提示.现在我想提供工具提示内容作为动态html内容,即我想在内容中显示一个html模式.我如何提供使用Aurelia框架.在使用自定义绑定处理程序的淘汰JS中,我提供的内容与分区ID一样,如下面的代码.

淘汰赛结构是

 <button data-bind="tooltip: { template: 'ElementId', trigger: 'click', placement: 'right', container: 'body' }">Click Me</button>

    <div id="ElementId" style="display: none;">
        <div>Dynamic content will go here</div>
    </div>

如何实现与Aurelia结构相同:

<template>
<require from="templates/popover/tooltip"></require>
<button data-toggle="tooltip" tooltip="placement:bottom;trigger:click;html:true;template:'ElementId';title:tooltip Header">Click Me</button>

<div id="ElementId" style="display: none;">
            <div>Dynamic content will go here</div>
        </div>

</template>

自定义属性代码

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

@customAttribute('tooltip')
@inject(Element)
export class Tooltip {
    element: HTMLElement;
    @bindable title: any;
    @bindable placement: any;
    @bindable content: any;
    @bindable template: any;

    constructor(element) …

我是这个框架的新手,我想知道是否有一个组件绑定允许您指定要在常规HTML元素上使用的组件而不是自定义HTML元素.

假设我们有一个Message组件.是否有可能将其用作:

<div component="message"></div>

代替

<message></message>

Knockout.js支持它们的组件:"组件"绑定.

我记得几天前读过关于从DOM节点开始获取组件的ViewModel的方法。

我猜那些元素是au-target在它们上面有类的元素（由Aurelia添加）。

我已经在Google /文档上进行了搜索，但没有找到任何东西。

那么，如何获取该元素的ViewModel？