操纵核心输入的显示值和承诺值

Question

我需要操作原始 API 数据中的值以显示给用户，并在通过 API 发送更新之前再次操作它们。我正在为每个值使用核心输入，但我在设置初始值和绑定到正确的更新事件时遇到困难。

<input id="host" is="core-input">

我的第一个问题是我不知道如何在不绑定到实时更改流的情况下设置和操作初始 value。我尝试只绑定到 committedValue 但它没有设置字段的初始值。

但是，即使我设置了commitedValue，我也无法触发它。我在字段中输入文本，然后切换字段或按回车键，但没有任何反应。

<input id="host" commitedValue="{{record | setHost}}" is="core-input">

和 JavaScript:

  setHost: {
    toDOM: function(record) {
      if(record.host === "@"){
        return record.domain;
      } else {
        return record.host + "." + record.domain;
      }
    },
    toModel: function(value) {
      if(record.host === "@"){
        return record.domain;
      } else {
        return record.host + "." + record.domain;
      }
    }
  }

Answer 1

要设置初始值，我觉得可以一次性绑定。

<template is="auto-binding">
  <input is="core-input" type="text" value="[[foo]]">
</template>

<script>
  var tmpl = document.querySelector('template');
  tmpl.foo = 'bar';
</script>

您尝试使用 commitedValue 的方法似乎不受支持，因为您实际上无法写入 commitedValue.

From the core-input docs on commitedValue

Setting this property has no effect on the input value.

最好听 on-change 或 on-blur（或两者），处理更改，然后手动更新 value

操纵核心输入的显示值和承诺值

Manipulating displayed value and committedValue on core-input

polymer