Question

我是aurelia框架的新手。我尝试使用内联编辑创建文本输入列表。默认情况下应禁用所有输入，点击修改按钮后，应该可以通过删除disbaled属性进行编辑。

我的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>

我正在收到警告：

WARN [templating-binding] Unknown binding command. Object {defaultBindingMode: null, attrName: "${input", attrValue: "", command: "edit", expression: null}

我已经通过修改editInput方法并将$event作为参数传递来找到解决方案：

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

}

它有效，但我想知道实现这个目标的正确方法是什么？

Answer 1

Aurelia感到很困惑b / c在名为input的{{1}}元素上没有属性。您需要使用binding命令绑定到disabled属性。

它可能会帮助您阅读一些有关如何使用Aurelia的绑定引擎的入门指南。例如，${input.edit ? '' : 'disabled'}可能没有按照您的意愿执行操作。要将value="${input.text}"属性绑定到该文本框的值，您需要使用input.text。

此外，在value.bind="input.text"处理程序中，您只需从数组中传递项目，而不是传递其ID。 click然后在click.delegate="editInput(input)"函数中将input.edit属性设置为true。或者，你可以在你的视图中内联这样做，如下所示。

最后，editInput并不遵循标准的JavaScript命名约定。您可能需要考虑切换到inputs_list或inputsList，如下所示：

以下是一个例子：https://gist.run?id=69bfe207db225125237878ebd7caccd8

<强> app.html

inputList

<强> app.js

<template>
    ${heading}
    <ul>
        <li repeat.for="input of inputList">
            <input disabled.bind="!input.edit" type="text" value.bind="input.text" class="inputs"/>
            <input type="button" click.delegate="input.edit = true" value="edit" />
        </li>
    </ul>
</template>

Answer 2

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

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

这样您就不必使用DOM查询或直接修改属性

查看此文章了解更多information

视图中数组的绑定元素

2 个答案: