Javascript 绑定视图中数组的元素_Javascript_Aurelia

Javascript 绑定视图中数组的元素

javascript aurelia

Javascript 绑定视图中数组的元素,javascript,aurelia,Javascript,Aurelia,我不熟悉aurelia框架。我正在尝试使用内联编辑创建文本输入列表。默认情况下，应禁用每个输入，单击编辑按钮后，应能够通过删除disbaled属性进行编辑 My welcome.js： import {inject} from 'aurelia-framework'; @inject(HttpClient) export class Welcome { heading = 'Welcome'; inputs_list = [ { 'i

我不熟悉aurelia框架。我正在尝试使用内联编辑创建文本输入列表。默认情况下，应禁用每个输入，单击编辑按钮后，应能够通过删除

disbaled

属性进行编辑

My welcome.js：

import {inject} from 'aurelia-framework';

@inject(HttpClient)
export class Welcome {
    heading =  'Welcome';

    inputs_list = [
        {
            'id': 1,
            'text': 'example one',
            'edit': false
        },
        {
            'id': 2,
            'text': 'example two',
            'edit': false
        },
    ];

    editInput(evt){
        let input = this.inputs_list.find( input => input.id === id );
        input.edit = true;
    }

}

我的视图文件welcome.html：

<template>
    ${heading}
    <ul>
        <li repeat.for="input of inputs_list">
            <input ${input.edit ? '' : 'disabled'} type="text" value="${input.text}" class="inputs"/>
            <input type="button" click.delegate="editInput(input.id)" value="edit" />
        </li>
    </ul>
</template>

通过修改

editInput

方法并将

$event

作为参数传递，我已经找到了解决方案：

editInput(evt){
    let inputs = evt.target.parentNode.getElementsByClassName('inputs');
    Array.from(inputs).forEach( input => input.removeAttribute('disabled') );

}

它可以工作，但我想知道实现这一点的正确方法是什么？

您可以将值直接绑定到属性，如下所示：

<input disabled.bind="input.edit" type="text" value="${input.text}" class="inputs"/>

这样，您就不必直接处理DOM查询或修补属性

查看本文了解更多信息

您可以将值直接绑定到属性，如下所示：

<input disabled.bind="input.edit" type="text" value="${input.text}" class="inputs"/>

这样，您就不必直接处理DOM查询或修补属性

查看本文了解更多信息

Aurelia对b/c感到困惑，

input

元素上没有名为

${input.edit？'''disabled'}

的属性。您需要使用binding命令绑定到禁用的属性

它可能会帮助您阅读一些关于如何使用Aurelia的绑定引擎的入门指南。例如

value=“${input.text}”

可能没有执行您希望它执行的操作。要将

input.text

属性绑定到该文本框的值，需要使用

value.bind=“input.text”

此外，在

click

处理程序中，只需从数组中传递项，而不必传递其id。

单击.delegate=“editInput（input）”

，然后在

editInput

函数中将

input.edit

属性设置为true。或者，您可以在视图中内联执行此操作，如下所示

最后，

inputs\u list

没有遵循标准的JavaScript命名约定。您可能需要考虑切换到<代码>输入列表>代码>或<代码>输入列表< /代码>，如下所示：

这里有一个例子：

app.html


${heading}

app.js

从“aurelia框架”导入{inject}；
欢迎参加出口班{
标题=‘欢迎’；
输入列表=[
{
“id”：1，
“文本”：“示例一”，
“编辑”：false
},
{
“id”：2，
“文本”：“示例二”，
“编辑”：false
},
];
}

Aurelia感到困惑b/c在名为

${input.edit？'''disabled'}

的

input

元素上没有属性。您需要使用binding命令绑定到禁用的属性