标签: aurelia-binding

我创建了一个自定义属性,它是bootstrap工具提示的包装器

tooltip.ts

import {bindable, inject, customAttribute} from "aurelia-framework";
import * as $ from "jquery";

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

    constructor(element) {
        this.element = element;
    }

    attached() {
        $('[data-toggle="tooltip"]').tooltip();
    }
}

了header.html

<a class="toggle-link" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Click to Search"><i class="fa fa-search"></i></a>

所以问题是如何将数据放置和数据原始平铺传递并绑定到类中的标题和位置Tooltip.当前的aurelia文档没有说明自定义属性的多个数据绑定.

我试图在一个没有视图模型的自定义元素中以两种略有不同的方式使用单个绑定.

现场input.html:

<template bindable="label,type,property">
  <div class="form-group">
    <label for="${property}">${label}</label>
    <input id="${property}" value.bind="${property}" type="${type}">
  </div>
</template>

我-form.html:

<form ...>
  <field-input label="Email address" type="text" property="email"></field-input>

所述期望的结果是:

<form ...>
  <div class="form-group">
    <label for="email">Email address</label>
    <input id="email" value.bind="email" type="text">
  </div>

在实际的结果是在控制台中的错误:

ERROR [app-router] TypeError: sourceExpression.connect is not a function(…)

我究竟做错了什么？

我在HTML中的脚本标记中初始化了一些全局变量:

<script>
  count = 0;
  window.count2 = 0;
  var count3 = 0;
</script>

在app.js,我订阅观察他们的变化:

let subscription = bindingEngine.propertyObserver(window, 'count')
  .subscribe((newValue, oldValue) => console.log('Global count: ', newValue, oldValue));

let subscription2 = bindingEngine.propertyObserver(window, 'count2')
  .subscribe((newValue, oldValue) => console.log('window.count2: ', newValue, oldValue));

let subscription3 = bindingEngine.propertyObserver(window, 'count3')
  .subscribe((newValue, oldValue) => console.log('Global count3: ', newValue, oldValue));  

然后我改变这样的值:

change() {
    count++;
    count2++;
    count3++;
}

只有count&& count2在控制台中被观察到:

Global count:  1 0
window.count2:  1 0

这是GistRun

问题:为什么count3不能观察到？我认为3种形式的初始化是等价的.

为了使用库,我需要能够绑定到UL元素的"for"属性.

这不起作用:

<ul for="${id}"> ... </ul>

基于测试我假设这是因为ul元素通常没有for属性.我该如何解决这个问题？这在Durandal/knockout中是微不足道的,我相信它是这样的:

data-bind="attr: { for: $data.id }"

我真的必须创建自定义属性吗？这会与用于的内置属性冲突label吗？还有其他明显的解决方法吗

我正在尝试在Aurelia中构建自定义元素.在这一点上,这就是我所拥有的:

item.html

<template>
    <span>${someProperty}</span>
</template>

item.ts

import {bindable} from 'aurelia-framework';
class Item {
    @bindable someProperty: string;
}

parent.html

<template>
<require from="./item"></require>
<item repeat.for="item of items"></item>
</template>

parent.ts

class Parent {
    items: Item[];

    loadItems() {
        // at this point, I'm sure that items is getting populated.
        this.items = dataservice.loadItems();
    }
}

我似乎无法在涵盖此方案的文档中找到任何内容.我得到的是,跨度是空的.我在控制台中没有收到任何错误.我是以正确的方式来做这件事的吗？

我正在试图弄清楚如何在Aurelia制作flash消息.我已经创建了一个自定义元素flash-message并且需要它app.html但消息不会更新.如果我将其设置为默认值,它会正确显示.

app.html

<template>
  <require from="./resources/elements/flash-message"></require>
  <flash-message></flash-message>
</template>

闪存message.html

<template>
  <div class="alert alert-success">${message}</div>
</template>

闪存message.js

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

export class FlashMessage {
  @bindable({defaultBindingMode: bindingMode.twoWay}) message = 'Default';

  setMessage(newValue) {
    this.message = newValue;
  }
}

对象detail.js

import {FlashMessage} from './resources/elements/flash-message';

export class ObjectDetail {
  static inject() {return [FlashMessage]};

  constructor(flash) {
    this.flash = flash;
  }

  activate(params, routeConfig) {
    this.flash.setMessage('Activate');
  }
}

该activate()代码被称为以及该setMessage()方法,但所显示的不传递消息未更新.我错过了什么？

我想用Aurelia构建一个简单的自定义组件,允许用户输入一个或多个字符串.如果有多个项目,列表应显示列表中每个项目的删除按钮.

我的问题是,当列表中有多个项目时,列表的第一项不显示删除按钮. 这是它的外观

这是我对自定义列表组件的代码和html:

视图

<template>
  <div repeat.for="item of items">
    <input type="text" value.bind="items[$index]">
    <button click.delegate="remove($index)" 
            if.bind="hasMoreThanOne()">Remove</button>
  </div>
  <button click.delegate="add()">Add</button>
</template>

视图模型

export class List {
  items: string[];

  constructor() {
    this.items = [];
    this.add();
  }

  add() {
    this.items.push("");
  }

  hasMoreThanOne() {
    return this.items.length > 1;
  }

  remove(index) {
    this.items.splice(index,1);
  }
}

我的问题是双重的:

• 为什么列表长度发生变化时,第一个列表项不会自动更新？
• 如何使第一项显示删除按钮？

我正在使用Aurelia创建一个应用程序,在该应用程序的一部分中,我有一个列出用户的网格,特别是用户活动状态.

为了允许编辑活动状态,我创建了一个滑动按钮控件(类似于在iOS中看到的那样),其中向左滑动为真,右侧为false.

我想要做的是在我的用户网格中使用此控件,以便使用它的人只需单击自定义幻灯片按钮即可启用/禁用用户,但我需要该控件以在其更改时提供其值放到它的行.

像这样的东西:

想象一下,我的桌子看起来像这样

<table>
  <thead> 
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Is Active?</th>
    </tr>
  </thead>
  <tbody>
    <tr repeat.for="user of userList">
      <td>${user.id}</td>
      <td>${user.name}</td>
      <td>${user.email}</td>
      <td><slidebutton active="${user.active}"></slidebutton></td>
    </tr>
  </tbody>
</table>

这非常有效,以至于幻灯片按钮根据用户的活动状态按预期设置为默认值.

但是当更改滑动按钮时,我希望以某种方式通知行,以便我可以告诉它更新后端并更改状态.

我并不反对将用户ID传递给自定义组件EG:

<td><slidebutton active="${user.active}" uid="${user.id}"></slidebutton></td>

但我宁愿没有控制权来打电话,也不做任何阻止我在其他地方使用它的东西,比如可能有不同切换信息项的其他网格.

我曾经想过基于事件的方式,然后我看了一个用户表,看到有可能有一个超过500行的表,跟踪/管理来自500个幻灯片按钮的500个事件没有看起来真像我特别想做的事情.

如果有一种方法可以将值反映回属性,那么我认为这将是一个很好的开始,但是如果可能的话,我真正喜欢的是自定义控件直接更改行上的基础视图模型如果可能的话.

是否可以使用绑定语法有条件地向元素添加属性？我知道if.bind,但这是目标要素.相反,我对定位元素的特定属性感兴趣.

例:

<a href.bind="model.link">${model.text}</a>

如果model.link是假的,那么我根本不想要href- 只是把它<a />当作一个容器元素.

我意识到我可以创建两个<a />标签 - 一个具有属性,一个没有 - 并且if.bind在两者上都使用,但这看起来很笨拙而且不像aurelia.