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

设置此属性对输入值没有影响。

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

在核心输入上操作显示值和committedValue

1 个答案: