自定義元素中的聚合物IronFormElementBehavior

我正在使用自定義日期選擇器（https://github.com/bendavis78/paper-date-picker）。它工作正常，但我想要做的是將其綁定到紙張輸入，所以無論何時輸入點擊，對話框顯示。我通過創建一個自定義元素來工作。我現在的問題是，我需要這個元素的鐵形式，所以我可以發送一個ajax請求的日期。我發現我需要自定義元素來擴展Polymer.IronFormElementBehavior，但是我找不到有關如何實際執行此操作的任何文檔。該示例只是將它放在常規輸入元素上，所以沒有有用的上下文。這是我與我的努力來實現的行爲自定義元素：自定義元素中的聚合物IronFormElementBehavior

<link rel="import" href="../../vendor/iron-form-element-behavior/iron-form-element-behavior.html"> 

<dom-module id="datepicker"> 

<template> 
    <style> 
    </style> 

    <paper-input id="input" label="[[label]]" on-tap="openDatePicker" value="{{inputValue}}"> 
     <iron-icon icon="date-range" prefix></iron-icon> 
    </paper-input> 

    <paper-dialog id="datePickerDialog" class="paper-date-picker-dialog" name="dumb" modal on-iron-overlay-closed="_onDialogClosed"> 
     <paper-date-picker id="datePicker"></paper-date-picker> 
     <div class="buttons"> 
      <paper-button dialog-dismiss>Cancel</paper-button> 
      <paper-button dialog-confirm>OK</paper-button> 
     </div> 
    </paper-dialog> 
</template> 

</dom-module> 

<script> 
Polymer 
({ 
    is: "datepicker" 

    , behaviors: 
    [ 
     Polymer.IronFormElementBehavior 
    ] 

    , properties: 
    {} 

    , ready: function() 
    { 
     this.$.name = this.name; 
    } 

    // Custom functions // 
    , _onDialogClosed: function(event) 
    { 
     if (event.detail.confirmed) 
     { 
      var date = new Date(this.$.datePicker.date); 
      this.inputValue = moment(date).format("LL"); 
      this.$.value = this.inputValue; 
     } 
    } 

    , openDatePicker: function() 
    { 
     this.$.datePickerDialog.open(); 
    } 
});

我不能得到的日期值在後的數據顯示，雖然。行爲具有名稱和值屬性，我覺得我需要做的就是將這些與我的論文輸入結合起來，但這似乎沒有任何作用。

有沒有人實際上成功實現了這種行爲？我錯過了什麼嗎？

來源

2016-03-01 Troncoso

我遇到了同樣的問題。屬性名稱'value'是特殊的。

鐵輸入補充說反映了值屬性，並且可以被用於雙向數據綁定在綁定值屬性。如果通過用戶輸入或腳本更改了綁定值，則會通知。

See docs

您正在使用屬性 'inputValue將'。這應該更改爲「值」。

您的自定義元素需要：

在初始定義設置一個value財產

更新上更改代碼的this.value代替this.inputValue

聚合物（{ 是：「日期選擇器「

, behaviors: 
[ 
    Polymer.IronFormElementBehavior 
] 

, properties: 
{ 
    value : { 
     type: String, 
     value: "Default value" 
    } 
} 

, ready: function() 
{ 
    this.$.name = this.name; 
} 

// Custom functions // 
, _onDialogClosed: function(event) 
{ 
    if (event.detail.confirmed) 
    { 
     var date = new Date(this.$.datePicker.date); 

     // Update this to just "value" 
     this.inputValue = moment(date).format("LL"); 
     this.$.value = this.inputValue; 

    } 
} 

, openDatePicker: function() 
{ 
    this.$.datePickerDialog.open(); 
}

}）;

來源

2016-04-17 20:23:28 joelcolucci

自定義元素中的聚合物IronFormElementBehavior

回答

相關問題