2015-06-12 6 views

Antwort

6

Ordnen Sie die berechnete Bindung einfach über ein Skript direkt dem Vorlagenelement zu und stellen Sie sicher, dass die beteiligten Eigenschaften nach der Definition der berechneten Bindung initialisiert werden.

Beispiel:

<template is="dom-bind"> 
    <div> 
    <input value="{{text::input}}"> 
    </div> 
    <div>[[describe(text)]]</div> 
</template> 

<script> 
    (function() { 
    var template = document.querySelector('template[is="dom-bind"]'); 

    template.describe = function(text) { 
     if (text) { 
     return 'You entered "' + text + '", which is ' + text.length + ' characters long.'; 
     } else { 
     return 'You didn\'t even enter a thing! Shame on you.'; 
     } 
    }; 

    template.text = ''; 
    })(); 
</script> 
+1

Dies funktioniert, mit der Ausnahme, dass die Bindung tritt _after_ die Wiedergabe erfolgt. Wenn ich also 'template.text =' initial text 'initialisiere; 'direkt nach' var template = document.querySelector ('...');', wird die berechnete Bindung nicht sofort gerendert: Ich bekomme eine Warnung in der Konsolenausgabe '[dom-bind :: _ annotatedComputationEffect]: compute-Methode 'describe' nicht definiert'. Die Bindung tritt jedoch auf, wenn ich mit der Eingabe im Eingabefeld anfange. Irgendwelche Gedanken dazu? –

+0

@es_code, ging ich voran und kopierte den obigen Code lokal und lief es, um zu versuchen, das Problem zu fangen; Leider (oder zum Glück?) habe ich keine Warnungen/Fehler in der Konsole sowohl in Chrome als auch in Firefox erhalten. [Hier ist der genaue Code, den ich getestet habe.] (Http://pastebin.com/AkWFcsZa) Könnten Sie ein paar weitere Details über die Umgebung angeben, in der die Warnung angezeigt wird? Ich würde auch empfehlen, auf die neuesten Minor-Versionen von Polymer und das WebComponents.js-Polyfill zu aktualisieren, nur um alle Fragen der Versionen aus dem Problem zu beseitigen. Ich bin neugierig, das zu versuchen und zu replizieren! –

+0

[schauen Sie] (http://pastebin.com/6PzCpvKy). Ich habe Ihrem JavaScript-Code eine 'setTimeout'-Verzögerung hinzugefügt, um die Umgebung zu simulieren, mit der ich mich beschäftige. Der Punkt hier ist, dass es einige Zeit dauern kann, von der Zeit, in der das 'is = dom-bind" '- Element deklariert wird, bis zur Ausführung des Codes, der' describe' definiert. In einem normalen Polymerelement ist dies kein Problem, da alle notwendigen Bindungen zeitnah erfolgen. (Ich fügte auch 'template.text = 'initial text';' hinzu, um klarzustellen, dass die berechnete Bindung nicht anfänglich berechnet wird. Suchen Sie nach der '[dom-bind :: _ ... method '-Beschreibung' undefined 'Warnung .) –