Question

我有一张Aurelia结构的表格如下：

//app.ts

products = [{
    name: "book",
    options: [{
        prop1: value1,
        prop2: value2
    }, {
        prop1: value1,
        prop2: value2
    }, {
        prop1: value1,
        prop2: value2
    }]
    }, {
    name: "notebook",
    options: [{
        prop1: value1,
        prop2: value2
    }, {
        prop1: value1,
        prop2: value2
    }, {
        prop1: value1,
        prop2: value2
    }]
    }, {..and so on}];


selectProduct(product) {
    this.selectedProduct = product;
}

saveOption(option) {
    // save the edited option value in the database
}

// app.html

<tr repeat.for="product of products">
    <td click.trigger="selectProduct(product)">${product.name}<td>
    <td repeat.for="option of product.options">
        <input type="text" value.bind="option.prop2" blur.trigger="saveOption(option)">
    </td>
</tr>

这是我原始应用中的实际表格，上面的代码是表格的简化版本。 table

基本上，我想让用户能够执行以下操作：

编辑任何行中的任何单元格，并在单元格模糊时，将编辑后的值保存在数据库中。
单击任意行的第一列（产品名称），以选择并突出显示该特定行。

除了以下用例：

外，它运行正常

用户编辑任意行中的单元格，立即点击第一列name（任何行，不一定是已编辑的行）。

理想情况下，应该保存已编辑的值并同时选择特定行（编辑后单击其名称的行，不一定是编辑的行）。（blur触发saveOption(option)并点击name触发selectProduct(product)。

但是发生了什么，它会在saveOption(option)上触发blur，但不会触发selectProduct(product)，blur事件会以某种方式阻止click事件。

我错过了什么，或者是否有更简洁的方法同时实现两个事件调用？谢谢。

Answer 1

您可以将产品传递给saveOption方法，并在selectProduct

结束时致电saveOption

selectProduct(product) {
    this.selectedProduct = product;
}

saveOption(option, product) {
    // save the edited option value in the database
    this.selectProduct(product);
}

<tr repeat.for="product of products">
    <td click.trigger="selectProduct(product)">${product.name}<td>
    <td repeat.for="option of product.options">
        <input type="text" value.bind="option.prop2"   blur.trigger="saveOption(option, product)">
    </td>
</tr>

Aurelia：如何在模糊后立即触发点击

1 个答案: