强制视图从valueconverter中更新

Question

昨天有人发表了关于gitter的消息。我最近遇到了同样的问题。因为这是一个常见的用例，我只是再次在这里发布他的问题，所以它不会在gitter宇宙中迷失... 是否有一种简单的方法可以强制ValueConverter始终为每个fromView调用toView？我有一个我只使用ValueConverter来限制整数。它有效，但有一个奇怪的转折：如果我将它从0更改为1.5并点击了（也使用updateTrigger：＆＃39;模糊＆＃39;此处），它会在VM中正确存储1，然后将输入值更改为1也是。但是如果我将它从1更改为1.5，它会更新VM，但由于VM中的值似乎没有变化，因此它不会更新输入（不调用toView）。 我知道我可以通过事件监听器和信号来解决这个问题，但这感觉就像是矫枉过正。 感谢

Answer 1

如果要添加“行为”，最好使用绑定行为。这将为您提供更多控制，甚至可以控制光标等。

https://gist.run?id=3d2870889cbf245e652f53db28d8476b

<强>整数输入结合-behavior.js

export class IntegerInputBindingBehavior {
  bind(binding, source) {
    binding.standardUpdateSource = binding.updateSource;
    binding.updateSource = function(value) {
      const intValue = parseInt(value, 10);
      if (isNaN(intValue)) {
        return;
      }
      this.standardUpdateSource(intValue);
      if (intValue.toString(10) !== value) {
        this.updateTarget(intValue.toString(10));
      }
    };
  }

  unbind(binding, source) {
    binding.standardSource = binding.standardUpdateSource;
    binding.originalUpdateSource = null;
  }
}

最好还是创建一个自定义元素。

Answer 2

使用signal绑定行为

您会在链接的问题中看到我评论过的类似问题。我实现的解决方案是使用signal绑定行为。

<强> template.html

<path d="${path| toSVGPath & signal: 'update-view'}" 
      style="stroke: black; stroke-width: 5; fill: none;"></path>

<强> viewModel.ts

import {BindingSignaler} from 'aurelia-binding';

// grab a reference to the signaler
constructor(signaler: BindingSignaler) {
    this.path = [[0,0]];
    this.signaler = signaler;
}

// and fire the signal event bound in your view
// whenever the data behind the valueConverter changes
updatePath(position) {
    this.path.push(position);
    this.signaler.signal('update-view');
}