Dartlang Polymer-On-Click-Ereignis in verschachtelten Elementen

Ich versuche, ein Onclick-Ereignis zu schießen. Mein Code sieht wie folgt aus:Dartlang Polymer-On-Click-Ereignis in verschachtelten Elementen

index.html:

<!--                                                    
    Copyright (c) 2016, <your name>. All rights reserved. Use of this source code                                  
    is governed by a BSD-style license that can be found in the LICENSE file.                                   
--> 

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="scaffolded-by" content="https://github.com/google/stagehand"> 
    <title>polymer_test_project_2</title> 

    <!-- Add to homescreen for Chrome on Android --> 
    <meta name="mobile-web-app-capable" content="yes"> 
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png"> 

    <!-- Add to homescreen for Safari on iOS --> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <meta name="apple-mobile-web-app-title" content="Web Starter Kit"> 
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> 

    <!-- Tile icon for Win8 (144x144 + tile color) --> 
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> 
    <meta name="msapplication-TileColor" content="#3372DF"> 

    <!-- Polyfill of Custom Elements and HTML Imports --> 
    <script src="packages/web_components/webcomponents-lite.min.js"></script> 

    <script defer type="application/dart" src="index.dart"></script> 
    <script defer src="packages/browser/dart.js"></script> 

    <!-- example of using a paper element --> 
    <link rel="import" href="packages/polymer_elements/roboto.html"> 

    <link rel="stylesheet" href="styles.css"> 
</head> 

<body unresolved> 
    <main-app></main-app> 
</body> 
</html>

index.dart:

// Copyright (c) 2016, <your name>. All rights reserved. Use of this source code                                 
// is governed by a BSD-style license that can be found in the LICENSE file.                                  
library my_project.web.index; 

import 'package:polymer_test_project_2/main_app.dart'; 
import 'package:polymer/polymer.dart'; 

/// [MainApp] used!                                                 
main() async { 
    await initPolymer(); 
}

main_app.html:

<!--                                                    
    Copyright (c) 2016, <your name>. All rights reserved. Use of this source code

durch ein BSD- geregelt Style-Lizenz, die in der LIZENZ-Datei gefunden werden kann.
->

<dom-module id="main-app"> 
    <style> 
    :host { 
     display: block; 
    } 
    </style> 

    <template> 
    <paper-input label="Type something..." value="{{text}}"></paper-input> 
    <p> 
     Text: <span>{{text}}</span><br /> 
     Reversed: <span>{{reverseText(text)}}</span> 
    </p> 
    <my-component> 
    </my-component> 
    </template> 
</dom-module>

main_app.dart:

@HtmlImport('main_app.html') 

library polymer_test_project_2; 
import 'dart:html'; 

import 'package:polymer_elements/paper_input.dart'; 
import 'package:polymer_elements/paper_button.dart'; 
import 'package:polymer/polymer.dart'; 
import 'package:web_components/web_components.dart'; 

part 'my_component.dart'; 

/// Uses [PaperInput]                                                
@PolymerRegister('main-app') 
class MainApp extends PolymerElement { 
    @property 
    String text; 

    MyComponent myComponent; 

    /// Constructor used to create instance of MainApp.                                        
    MainApp.created() : super.created(); 

    @reflectable 
    String reverseText(String text) { 
    return text.split('').reversed.join(''); 
    } 
}

my_component.html:

<dom-module id="my-component"> 
    <template> 
    <span>foobar</span> 
    <span>{{text}}</span> 
    <paper-button on-click="{{ settext }}">setText</paper-button> 
    </template> 
</dom-module>

und my_component.dart:

@HtmlImport ('My_Component. html ') Teil von polymer_test _project_2;

@PolymerRegister('my-component') 
class MyComponent extends PolymerElement { 
    @property 
    String text="hello"; 

    MyComponent.created() : super.created() { 
    print("mycomponent created"); 
    } 

    @Listen('settext') 
    void setText([_, __]) { 
    print("text set to goodbye"); 
    text="goodbye"; 
    } 
}

Im Moment wird der Button in my-Komponente angezeigt, aber wenn ich auf die Schaltfläche klicken, wird die Fehlermeldung kommt:

[my-component::_createEventHandler]: listener method `{{ settext }}` not defined

Weiß jemand, wie ich diese Arbeit bekommen können ? :)

Vielen Dank im Voraus!

Quelle

2016-05-24 ehrt1974

Verwenden Sie für die Ereignisbindung nicht {{...}}, dies ist nur für Wertbindung. Die on- zeigt bereits Ereignis Polymer-Bindung und Ereignisbindung erlaubt nur einen Funktionsnamen überall, also das ist alles, was notwendig ist:

<paper-button on-click="settext">setText</paper-button>

Quelle

2016-05-24 13:10:54

cool! Vielen Dank. Ich stellte fest, dass ich auch @Listen ('settext') zu @reflectable ändern musste. Und um den Wert des Bereichs tatsächlich aktualisieren zu lassen, musste ich SetText setzen ('text', text = "tschüss") – ehrt1974

Ich sehe. Ich habe nicht deinen gesamten Code untersucht. –

Dartlang Polymer-On-Click-Ereignis in verschachtelten Elementen

Antwort

Verwandte Themen