Question

简短版：请看一下这个plunkr：http://plnkr.co/edit/ZdiXFOS3huYhqT3CC7i1?p=preview

我有一个网格，其中包含一些数字输入字段。如果我更改其中一个输入中的可编辑值，则应更新行总数。这在Chrome中可以正常工作（=我希望它可以），但在IE11 / Edge中则不行。在Microsoft浏览器中，总计将在下一个“模糊”事件中更新，这不是我需要的行为。

更长的描述：我的网格（app.html）（在现实生活中，这将是对话框中的一个表单）

<template>

  <require from="my-input"></require>
  <require from="my-format"></require>

  <table class="table">
    <thead>
      <tr>
        <td>&nbsp;</td>
        <td>North</td>
        <td>East</td>
        <td>West</td>
        <td>South</td>
        <td>Total</td>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="r of data.rows">
        <td>${r.year}</td>
        <td><my-input val.two-way="r.v1"></my-input></td>
        <td><my-input val.two-way="r.v2"></my-input></td>
        <td><my-input val.two-way="r.v3"></my-input></td>
        <td><my-input val.two-way="r.v4"></my-input></td>
        <td>${sumRow(r.year) & signal:'mySignal'}</td>
      </tr>
    </tbody>
  </table>

</template>

app.js：

import 'bootstrap';
import 'bootstrap/css/bootstrap.css!';

export class App {
  data = {
    "rows": [{
      "year": "2014",
      "v1": 100,
      "v2": 200,
      "v3": 300,
      "v4": 400
    }, {
      "year": "2015",
      "v1": 500,
      "v2": 600,
      "v3": 700,
      "v4": 800
    }, {
      "year": "2016",
      "v1": 900,
      "v2": 1000,
      "v3": 1100,
      "v4": 1200
    }]
  }

sumRow(y) {
        var row = this.data.rows.find((item) => item.year === y);
        return row.v1 + row.v2 + row.v3 + row.v4;
    }
}

我正在使用自定义输入元素，因为所有值都需要格式化为德语数字格式，这要求输入在模糊时更新。

MY-input.html

<template>
    <require from="./my-format"></require>

    <input type="text" value.bind="val | myFormat & updateTrigger:'blur':'paste'" class="form-control" blur.trigger="myOnBlur()" />

</template>

要在更改值后触发行总计算，请使用Aurelia BindingSignaler：

MY-input.js

import {bindable, inject} from 'aurelia-framework';
import {BindingSignaler} from 'aurelia-templating-resources';

@inject(BindingSignaler)
export class MyInputCustomElement {
    @bindable val;

    constructor(signaler) {
        this.signaler = signaler;
    }

    myOnBlur() {
      console.log("blur");
      this.signaler.signal('mySignal');
    }

    valChanged() {
      console.log("val changed: " + this.val);
    }
}

我的问题是更新行总计在Chrome中完美运行，但我需要它在Microsoft IE11和Edge中工作，而这最后两个浏览器显示不同的行为。如果我更改了一个值并移动到下一个输入字段，则没有任何反应，但我会再次移动，这是我在第一次移动后所期望的更新。

如果我查看我在代码中包含的日志托管，我可以看到在Chrome中首先调用valChanged（）然后触发模糊，而IE 11执行此操作则反过来首先触发模糊然后调用valChanged（）。

我尝试在valChanged（）内部发送信号，虽然在那时更新了val，但此时仍未计算总数。

我错过了什么吗？有任何建议如何在IE11 / Edge中解决这个问题？

Answer 1

该模板具有以下html（格式化以便更容易grokking）：

<input type="text" 
       value.bind="val | myFormat & updateTrigger:'blur':'paste'" 
       class="form-control" 
       blur.trigger="myOnBlur()">

浏览器会解析html，从而产生一个由Aurelia的ViewCompiler“编译”的DOM节点。此编译步骤涉及枚举DOM节点and their attributes，查找所有绑定，行为等。

根据上面的模板，您希望DOM按照它们在html中显示的顺序列出属性：type，然后value.bind，然后是class，最后{ {1}}最终会导致对元素blur.trigger事件的两次订阅，首先是blur绑定/ value，第二次是updateTrigger。这是它在Chrome中的工作方式，但在Internet Explorer / Edge中，blur.trigger出现在blur.trigger之前，导致您看到的行为。运行下面的代码段，看看我的意思。

value.bind

let input = document.querySelector('input');
console.log('attributes: ' + Array.from(input.attributes).map(a => a.name).join(', '));

在Chrome中，结果将是： result

在Edge中，结果将是： result

IE11 / Edge

1 个答案: