在DOM中创建自定义元素并添加从aurelia-framework实现可绑定的相应视图模型时,我的视图呈现完美.

DOM中的自定义元素如下:

<!-- chatbox.html -->
<template>
...    
    <ul class="chat">
        <answer name="Reah Miyara" nickname="RM" text="Hello World"></answer>
    </ul>
...
    <button class="btn" click.trigger="addCustomElement()">Add</button>
...
</template>

当从浏览器检查时,Aurelia的魔术渲染会导致与DOM中的自定义元素关联的各种子元素.

当我尝试使用jQuery动态地向DOM添加其他自定义元素时会出现问题...

// chatbox.js
addCustomElement() { 
    $('.chat').append('<answer name="Joe Smith" nickname="JS"></answer>');
}

使用按钮调用此方法(Aurelia的'click.trigger')确实将自定义元素添加到DOM,但没有允许自定义元素在视图中正确呈现的各种子元素...

如何正确动态地向DOM添加自定义元素或告诉Aurelia处理我添加的自定义元素,以便在我的视图中呈现？

提前致谢!

所以,我有一个所有用户的列表,它填充了一个选项的选项.

<option repeat.for="user of userService.users">
  ${user.firstName} ${user.lastName}
</option>

我有一个传入的组记录,其中附有一个用户列表.我遵循作弊说明并将其绑定到模型的单个索引.

<select value.bind="group.users[0]">
    <option repeat.for="user of userService.users" model.bind="user">
      ${user.firstName} ${user.lastName}
    </option>
</select>

因此,组中的传入用户与列表中的某个用户相同:

{
    id: 123,
    firstName: 'Matt',
    lastName: 'Davis'
}

但是当加载组并将其绑定到视图时,不会从选择中选择正确的用户.实际上,我希望这是因为JavaScript会寻找引用平等.

理想情况下,我想Aurelia路上找到传入的记录是如上和(a)通过选择测试平等(二),我在一些扩展(可能是过滤器？)已经定义搜索列表,(c)选择它在列表中并且(d)将该选择传播回记录中,以便记录现在在引用中同步.

我宁愿不回到手动执行此操作的触发器,因为在我的应用程序中我会有很多这样的选择.

对于(a)和(c),我愿意解决,尽管很遗憾.

更新: 看起来这是一个已知的错误:https://github.com/aurelia/templating/issues/253
我将它留在这里作为参考/可搜索的目的.

代码:

input-mask.ts (这里可以看到完整的代码)

@customAttribute('input-mask')
@inject(Element)
export class InputMaskCustomAttribute {

    @bindable({ defaultBindingMode: bindingMode.twoWay,
                changeHandler: 'onUnmaskedValueChanged'  })
    unmaskedValue: any;

    onUnmaskedValueChanged(newValue, oldValue) {
        console.log('unmaskedValue updated from inside the custom attribute');
    }

    @bindable
    mask: string;

    attached() {

          this.eventTarget.on('focusout', (e: any) => {
             this.unmaskedValue = (<any>$(this.element)).cleanVal()
             this.fireEvent(e.target, 'input');
          });
    }

  // Code for constructor, fireEvent and to setup the mask...
}

carrier.html

<input input-mask="mask.bind: carrier.airbillMask; unmasked-value.bind: airbill" 
       value.bind="formattedAirbill"/>

更新:要解决此错误,请更改为unmasked-value.two-way绑定将起作用.

carrier.ts

@bindable({ defaultBindingMode: bindingMode.twoWay})
carrier: …

使用Aurelia我正在努力使用绑定和repeat.for:假设我在viewmodel中有一个属性menuItems(一个数组MenuItem)我想用自定义模板重复menuitems:

export class App {
    menuItems : MenuItem[];
}
export class MenuItem{
   label:string;
}

在我的应用模板中,我使用自定义元素

<require from="./menu-item"></require>
<ul>
  <menu-item repeat.for="item of menuItems"></menu-item>
</ul>

我的自定义模板(menu-item.html):

<template>
  <li>${label}</li>
</template>

获取模板绑定或访问绑定的MenuItem的正确方法是什么？

我已经试过如下:${label}和${item.label},但不起作用.我可以在bind(bindingContext)回调中看到bindingContext有一个属性'item':bindingContext.item这是被绑定的MenuItem.

我还尝试在MenuItem类上创建可绑定属性:

export class MenuItem{
   @bindable current any;
   label:string;
}

和以下中继器:

<menu-item repeat.for="item of menuItems" current.bind="item"></menu-item>

和相应的模板

<template>
  <li>${current.label}</li>
</template>

注意:请参阅下面的编辑1,以获取我对代码中此点的评论.

这种方法也行不通.

其他探索包括不使用自定义元素(工作),使用<compose view-model='MenuItem', model.bind='item'/>,在这个例子中也不起作用,我想也会详细说明.

工作解决方案,另请参阅Aurelia repeat.for绑定自定义元素 :

重复并绑定模板和viewmodel类的自定义属性:

<menu-item repeat.for="item of menuItems" current.bind="item" containerless></menu-item>

viewmodel类:

import {bindable, customElement} …

我有一个自定义元素,它将接受用户输入,并在[保存]按钮单击,我想将信息传递给父视图模型,以便我可以将其发送到服务器并移动到下一部分.我将简化这个例子,例如:

my-element.js:

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

@customElement('my-element')
@bindable('save')
export class MyElement { }

my-element.html:

<template>
    <button click.delegate="save()">Click this</button>
</template>

parent-view-model.js:

export class ParentViewModel {
  parentProperty = 7;
  parentMethod() {
    console.log(`parent property: ${this.parentProperty}`);
  }
}

parent-view-model.html:

<template>
    <require from="./my-element"></require>
    <div class="content-panel">
        <my-element save.bind="parentMethod"></my-element>
    </div>
</template>

有关演示,请参阅(app.js和app.html代表parent-view-model.js和parent-view-model.html):

https://gist.run/?id=96b203e9ca03b62dfb202626c2202989

有用!的种类.不幸的是,this似乎必须my-element代替parent-view-model,所以在这个例子中,打印到控制台的是:parent property: undefined.那样不行.

我知道我可以利用EventAggregator来促进自定义元素和视图模型之间的某些通信,但如果我能帮助它,我想避免增加复杂性.

我有一个dropdown具有以下属性:

<select value.bind="row.columns[$parent.$index].colSize" change.delegate="changeColumnSize($parent.$index, $index, row.columns[$parent.$index].colSize)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

但似乎我不能row.columns[$parent.$index].colSize作为参数传递.它始终是undefined.

如何将下拉列表的选定值直接传递给changeevents方法？

我正在尝试将当前的Angular.js项目迁移到Aurelia.js.我正在尝试这样做:

report.js

export class Report {
       list = [];

       //TODO
       listChanged(newList, oldList){
             enter code here
       }
}

report.html

<template>
    <require from="component"></require>
    <component list.bind="list"></component>
</template>

所以问题是:如何检测列表何时更改？

在Angular.js我能做到

$scope.$watchCollection('list', (newVal, oldVal)=>{ my code });

也许Aurelia有类似的东西？

我们已升级Aurelia大街(特别aurelia-framework到1.0.6,aurelia-bindong到1.0.3),现在我们正面临着一些绑定问题.

有一个带有计算类的元素列表,我们在包含列表的自定义元素中有一个方法:

getClass(t) {
    return '...' + 
           (this.selected.indexOf(t) !== -1
                ? 'disabled-option' :
                : ''
           ) + (t === this.currentTag 
                ? 'selected-option' 
                : ''
           );
}

而class.one-way="$parent.getClass(t)"对于列表元素,一切OK.

在升级之后,它只是停止工作,因此每当selected(btw它的可绑定)或currentTag属性被修改时,该getClass方法就不会被调用.

我通过将此逻辑移动到视图来部分解决了这个问题:

class="${$parent.getClass(t) + (selected.indexOf(t) !== -1 ? 'disabled-option' : '') (t === $parent.currentTag ? 'selected-option' : '')}"

我知道看起来很好......但是这样做了t === $parent.currentTag,但是这个disabled-option课仍然没有应用.

所以,问题是:

如何强制Aurelia调用视图中属性的方法？

PS

我知道它可能会导致一些性能问题.

小记:

我不能简单地selected向list元素添加一个属性,因为我不会以某种方式修改自定义元素的数据,我基本上希望我的代码能够正常工作而不需要做太多更改.

UPD

最后,Fabio Luz …

我有一个来自API的项目列表,它们并不总是相同,因此数组中的项目数总是在变化.我正在为每个项目创建一个复选框.

用户可以检查/取消选中每个项目.这就是我想要做的事情:

1. 选中某个项目时,它会将该项目的ID推送到数组中
2. 取消选中某个项目时,它将从该数组中删除该项目的ID

我只需要知道我是如何根据是否已选中或未选中来调用某些内容.我尝试了"checked.delegate"和"checked.trigger",我似乎无法让它工作.

只是一个常规的click.delegate将无法正常工作,因为我无法保持状态是否为真,我无法为所有这些设置变量,因为我并不总是知道哪些项目将来自API.有什么建议？

我正在尝试将标签的src属性绑定到imgaurelia组件中，该怎么做？

我正在以reapeat.for这种方式循环创建一些图像：

<img repeat.for="picture of infoboard.memberPictures" src.bind="picture">

其中，memberPictures数组来自视图模型，的值picture是相对地址：../../../assets/pictures/img_avatar.png。

在视图模型中，我从数据库中获取成员的信息，然后通过处理数据，以memberPictures这种方式填充数组：

this.httpClient.fetch(`boards/membersof/${this.infoboard.id}`)
      .then(response => response.json())
      .then(data => {
        this.infoboard.memberPictures = data.result.map(element => `../../../assets/pictures/${element.profile_pic}.png`);
      });

通过这种方式绑定地址，将不会加载图像，如下所示：

并且浏览器控制台显示以下错误：

this.httpClient.fetch(`boards/membersof/${this.infoboard.id}`)
      .then(response => response.json())
      .then(data => {
        this.infoboard.memberPictures = data.result.map(element => `../../../assets/pictures/${element.profile_pic}.png`);
      });

检查元素时，成员头像的图片标签是这样的：

img_avatar.png:1 GET http://localhost:8080/assets/pictures/img_avatar.png 404 (Not Found)

但是，如果我们为图像源提供静态图像，且其静态地址与上述示例中生成的地址完全相同，如下所示：

<img src.bind="picture" class="au-target" au-target-id="10" src="../../../assets/pictures/img_avatar.png">

不会有问题：

现在通过检查元素，结果是不同的：

<img repeat.for="picture of infoboard.memberPictures" src.bind="../../../assets/pictures/img_avatar.png">

显然，在aurelia中处理静态文件有所不同。图像源如何以此方式更改，以及绑定图像源的正确方法是什么？