Question

这是我认为可能更容易的事情。尽管有这个问题的具体细节，但我对任何能让我根据Polymer.dart的其他两个字段的内容自动更新第三个表单字段的方法感兴趣。

像这样的东西，“[]”代表表单字段。

姓名：[名字] [姓氏]

全名：[family_name，given_name]

所以例如;如果有人在前两个字段中输入“ John ”和“ Smith ”。然后，“全名”行显示：[史密斯，约翰]，其中任何一个字段都会更新。

表格中的类和标记开发了以下示例

Get Input from a Form教程

对于这样的表格......

  <polymer-element name="reference-form" extends="form" >
    <template>
      <style> ... </style>
      <div id="slambookform"  >
        <div class="entry">
          <label>Author:</label>
          <input type="text" value="{{theData['authorGivenName']}}" >
          <input type="text" value="{{theData['authorFamilyName']}}">
        </div>
          :
        <div class="entry">
          <label>Full name:</label>
          <input disabled type="text" value="{{fullName}}" >
        </div>
          :
      </div>
    <template>
  </polymer-element>

我最初尝试实现这一目标的方式如下：

@observable
String fullName(){

    return theData['authorFamilyName'] +', '+ theData['authorGivenName'];

}

哪个不起作用。当我将'fullName'变为@observable变量并使用按钮更新它时，表单会根据需要进行更新。因此，我的问题是，我可以将第三个字段绑定到两个（或更多）其他字段吗？

我想我需要某种事件处理程序。对于两个字段，更改格式甚至很简单。我想在最终的情况下格式化几个字段，而不仅仅是两个字段。

在这个主题上，是否有飞镖聚合物或飞镖的钩子来提供未来或回叫？在我的示例中，类似于：' after-change '。只是大声思考，这样的事情会很好。

提前致谢。

Answer 1

沿着这些方向（谨慎 - 代码未经过测试）

 <polymer-element name="reference-form" extends="form" >
    <template>
      <style> ... </style>
      <div id="slambookform"  >
        <div class="entry">
          <label>Author:</label>
          <input type="text" value="{{authorGivenName}}" >
          <input type="text" value="{{authorFamilyName}}">
        </div>
          :
        <div class="entry">
          <label>Full name:</label>
          <input disabled type="text" value="{{fullName}}" >
        </div>
          :
      </div>
    <template>
  </polymer-element>

class reference_form.dart

String _authorGivenName;
@observable get authorGivenName => _authorGivenName;
set authorGivenName(String val) {
  _authorGivenName = val; 
  notifyPropertyChange(#fullName, '${_authorGivenName} ${_authorFamilyName}', 
    '${val} ${_authorFamilyName}');
}

String _authorFamilyName;
@observable get authorFamilyName => _authorFamilyName;
set authorFamilyName(String val) {
  _authorFamilyName = val; 
  notifyPropertyChange(#fullName, '${_authorGivenName} ${_authorFamilyName}',
    '${_autorGivenName} ${val}');
}

@observable
String get fullName => '${_authorGivenName} ${_authorFamilyName}';

Answer 2

Polymer现在直接使用@ObserveProperty

支持此用例

  @observable String authorGivenName = '';
  @observable String authorFamilyName = '';
  @observable String get fullName => '${authorGivenName} ${authorFamilyName}';

  @ObserveProperty('authorGivenName authorFamilyName')
  void updateFullName(old) {
    notifyPropertyChange(#fullName, old, fullName);
  }

将两个@observable变量动态绑定（或格式化）到第三个@observable变量

2 个答案: