2015-07-23 31 views
5

kolaydı: sürüm 1.0Polymer.js iki yönlü sürüm 0.5 içinde

<polymer-element name="textarea-tpl" attributes="value placeholder"> 
    <template> 
     <link rel="stylesheet" type="text/css" href="css/index.css"> 

     <textarea id="textarea" value="{{value}}" placeholder="{{placeholder}}"></textarea> 
     <textarea id="hidden_textarea"></textarea> 
    </template> 
    <script> 
     Polymer({ 
      ready: function() { 
       var text = this.$.textarea; 
       var hidden_text = this.$.hidden_textarea; 

       text.onkeyup = function() { 
        hidden_text.value = text.value + "\n"; 
        var height = hidden_text.scrollHeight; 
        text.style.height = height+'px'; 
       }; 
      } 
     }); 
    </script> 
</polymer-element> 

bu bağlanmayı çalışmaz. Sadece yazma işleri ve sadece bir kez garip olan şeyler. v1.0 için Kodu:

<dom-module id="chat-textarea"> 
    <template> 
     <textarea id="textarea" value="{{value}}" placeholder="{{placeholder}}"></textarea> 
     <textarea id="hidden_textarea"></textarea> 
    </template> 

    <script> 
     Polymer({ 
      is: "chat-textarea", 
      properties: { 
       value: String, 
       placeholder: String 
      }, 

      set text(val) { 
       this.$.textarea.value = val; 
      }, 
      get text() { 
       return this.$.textarea.value; 
      }, 

      ready: function() { 
       var text = this.$.textarea; 
       var hidden_text = this.$.hidden_textarea; 

       text.onkeyup = function() { 
        hidden_text.value = text.value + "\n"; 
        var height = hidden_text.scrollHeight; 
        text.style.height = height+'px'; 
       }; 
      } 
     }); 
    </script> 
</dom-module> 

Şimdi metni almak \ kümesi kullanmak, ancak yalnızca JS mülk ve müsait değil.

Demir-autogrow-textarea'da şöyle yazılmıştır: Textarea'nın değer özelliği gözlemlenebilir olmadığından, zorunlu güncelleştirmeler için bu öğenin bağlama değerini kullanmalısınız. Ama neden 0.5 textarea değerinde gözlemlenebilir?

cevap

7

Polimer 1.0'daki bir giriş değerine bağlanmak için, bağlandığınız değişkenden sonra add :: input.

Örnek: Aşağıda

<textarea value="{{taValue::input}}"></textarea> 

demir girişi gibia working example on plnkr

elementler otomatik olarak değişken bağlama özelliğini bağlamak-giriş kullanın.

two-way binding

+1

için teşekkürler. Demir-autogrow-textarea'yı görüyordum https://github.com/PolymerElements/iron-autogrow-textarea/blob/master/iron-autogrow-textarea.html Dinleyicileri ve gözlemcileri kullanıyor. Senin seçeneğin çok daha kolay. – wishmaster35

+0

Kabul ediyorum, '' işlevini kullanın –

İlgili konular