我以为我试图做一些非常简单的事情,但我无法做到这一点.整个例子都是关于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,我有一个绑定到网格的项目数组,并且它们上面有一个选定的属性.我想绑定一个按钮,当任何一个项为真时启用.我可以做一个蛮力的方法,我有一个过滤列表并返回所选项目的getter,但这意味着我将在应用程序中不断进行脏检查,我不想这样做.我希望有一个更有效的方法.有任何想法吗？
假设我有一系列元素,除了在我的应用程序中显示列表外,我想将列表同步到服务器HttpClient.如何观察阵列的变化？我试过了:
@inject(ObserverLocator)
export class ViewModel {
constructor(obsLoc) {
this.list = [];
obsLoc.getObserver(this, 'list');
.subscribe(li => console.log(li));
}
}
但我既没有错误也没有记录消息.
我开始使用Aurelia,RethinkDB和Socket.IO的简单TODO应用程序.我似乎在重新渲染或重新评估通过Socket.IO更改的对象时遇到问题.所以基本上,一切都在第一个浏览器上运行良好但在第二个浏览器中没有重新渲染,而在控制台中显示对象确实显示了我的对象的差异.问题仅在于更新对象时,它完全适用于从待办事项数组创建/删除对象.
HTML
<ul>
<li repeat.for="item of items">
<div show.bind="!item.isEditing">
<input type="checkbox" checked.two-way="item.completed" click.delegate="toggleComplete(item)" />
<label class="${item.completed ? 'done': ''} ${item.archived ? 'archived' : ''}" click.delegate="$parent.editBegin(item)">
${item.title}
</label>
<a href="#" click.delegate="$parent.deleteItem(item, $event)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
<div show.bind="item.isEditing">
<form submit.delegate="$parent.editEnd(item)">
<input type="text" value.bind="item.title" blur.delegate="$parent.editEnd(item)" />
</form>
</div>
</li>
</ul>
带有RethinkDB更改源的NodeJS
// attach a RethinkDB changefeeds to watch any changes
r.table(config.table)
.changes()
.run()
.then(function(cursor) {
//cursor.each(console.log);
cursor.each(function(err, item) {
if (!!item && !!item.new_val && item.old_val == null) {
io.sockets.emit("todo_create", item.new_val);
}else if (!!item …我正在使用Aurelia的自定义元素重复一组条目.以下是样本要点:https://gist.run/？ id = 38aee854447122f021bc05e1e0de25ae
现在,我需要deleteEntry(entry)在单击custom元素中定义的按钮时访问该方法.我尝试过使用$parent.deleteEntry(entry)但它不起作用.
看到这个问题,但它已经超过一年了,我想知道现在是否有更清洁的方法来实现这一目标.
在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处理我添加的自定义元素,以便在我的视图中呈现？
提前致谢!
在knockoutjs中,您可以输出一个漂亮的json格式的ViewModel进行调试
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
如果有办法在Aurelia完成同样的事情
在我的应用程序中,我已经制作了很多"服务",我可以在我的视图模型中注入,以节省som冗余和时间.
现在,我希望更进一步,并制作那些表单元素(选择,文本,复选框 - 启动器的选择下拉列表)并将它们转换为自定义元素,仅在自定义元素中注入服务.
我可以在某种程度上使它工作.我在"父"视图中需要时显示自定义元素(在这种情况下选择),但是当我更改自定义选择元素的选定值时,它不会绑定到"父"视图模型,这是我的要求.
我希望能够通过其模板中的bind属性将我选择的值从自定义元素绑定到"父"视图模型上的属性.
我会在几分钟内更新一个小代码片段.
create.js(我称之为父视图模型)
import {bindable} from 'aurelia-framework';
export class Create{
heading = 'Create';
@bindable myCustomElementValue = 'initial value';
}
create.html(父视图)
<template>
<require from="shared/my-custom-element"></require>
<my-custom selectedValue.bind="myCustomElementValue"></my-custom>
<p>The output of ${myCustomElementValue} should ideally be shown and changed here, as the select dropdown changes</p>
</template>
我-custom.js
import { inject, bindable} from 'aurelia-framework';
import MyService from 'my-service';
@inject(MyService )
export class MyCustomCustomElement {
@bindable selectedValue;
constructor(myService ) {
this.myService = myService ;
}
selectedValueChanged(value) {
alert(value);
this.selectedValue = value; …我有一个复选框列表,当用户选中一个复选框时,在.js文件中调用一个函数,然后调用一个调用webapi控制器的方法dataservice.js,这一切都正常并返回正确的数据.
完成该过程后会发生的情况是未选中触发序列的复选框.我已经检查了结果并且schoolDistrict.IsChecked为该项设置为true,这是正确的.
如何检查复选框？
下面是代码,但我不确定check.one-way绑定
<li repeat.for="schoolDistrict of schools.Districts">
<input type="checkbox" checked.one-way="schoolDistrict.IsChecked" value="${schoolDistrict.Value}" click.trigger="searchSchoolDistrict()"/>${schoolDistrict.Name}
</li>
任何帮助将非常感谢.
使用列表的常见用例是从列表项中访问列表的方法.例如:项目项具有从包含列表中删除自身的选项.我想知道我在下面描述的Aurelia模式是否有效,或者是否有更好的解决方案.
在Aurelia,我有以下设置:
包含列表:(project-list.html和projectList.js)
<template>
<div class="projects">
<input value.bind="newProjectName" placeholder="New project name"/>
<project-item repeat.for="project of projects" project.bind="project"></project-item>
</div>
</template>
和子项:( project-item和projectItem.js)
<template>
<span class="title">
${project.name} <i click.delegate="deleteProject(project)" class="icon-trash"></i>
</span>
</template>
在这种情况下deleteProject(project)是projectList VM的成员:
function deleteProject(project){
var index = this.projects.indexOf(project);
if (index>-1){
this.projects.splice(index,1)
}
}
不幸的是,正如我从这个问题中理解的那样https://github.com/aurelia/framework/issues/311,这将不再起作用.
作为解决方法,我可以在项目项VM上绑定一个函数:
@bindable delete: Function;
并在项目列表模板中:
<project-item repeat.for="project of projects" project.bind="project" delete.bind="deleteProject"></project-item>
这确实有效,提供绑定函数是带有闭包的赋值属性:
deleteProject = function(project : Projects.Project){
var index = this.projects.indexOf(project);
if (index>-1){
_.remove(this.projects,(v,i)=>i==index);
}
}
需要闭包来访问正确的上下文(this作为项目列表).运用
function deleteProject(project)
this 将引用项目项的上下文. …