CanJS auf klicken außerhalb der Komponente, die Komponente

Question

Ich möchte ein Ereignis Listener in <some-component> hinzufügen, die auf die Schaltfläche reagiert.

<some-component></some-component> 
<button class="click">click here</button> 

Ich bin sicher, das ist wirklich einfach. Ich bin sehr neu bei CanJS und arbeite daran.

<can-component tag="some-component"> 
<style type="less"> 
    <!-- stuff --> 
</style> 
<template> 
    <!-- stuff --> 
</template> 
<script type="view-model"> 
import $ from 'jquery'; 
import Map from 'can/map/'; 
import 'can/map/define/'; 

export default Map.extend({ 
    define: { 
    message: { 
     value: 'This is the side-panels component' 
    } 
    } 
}); 
</script> 
</can-component> 

Ich versuchte, ein $('body').on('click', '.click', function() {}); auf die Komponente hinzugefügt und es nicht zu funktionieren scheint. Ich habe viel Dokumentation gelesen, aber mir fehlt noch ein grundlegendes Verständnis.

UPDATE

Ich habe versucht, dieses:

<some-component-main> 
    <some-component></some-component> 
    <button class="click">click here</button> 
</some-component-main> 

mit dem Ereignis-Listener in some-component-main

events: { 
    ".click click": function(){ 
    console.log("here I am"); 
    } 
}, 

Aber das hat nicht funktioniert auch.

Answer 1

<some-component-main> 
    <some-component></some-component> 
    <button class="click">click here</button> 
</some-component-main> 

mit dem Ereignis-Listener in einigen Komponentenhaupt

events: { 
    ".click click": function(){ 
    console.log("here I am"); 
    } 
}, 

Dies funktionierte einmal erkannte ich, dass Komponenten mit einer Zahl endet verursacht andere Probleme, die es wurde verhindert.

Answer 2

Sie können Objekte innerhalb Ihrer Komponente für den übergeordneten Bereich mithilfe der Syntax {^property-name} oder {^@method-name} verfügbar machen. Lesen Sie es hier: https://canjs.com/docs/can.view.bindings.toParent.html

Hier ist eine Geige: http://jsbin.com/badukipogu/1/edit?html,js,output

Im folgenden Beispiel < my-compontent > implementiert eine doSomething Methode und wir die Schaltfläche, die Methode aufrufen, wenn darauf geklickt. Wir stellen die Methode als "doFooBar" zur Verfügung.

<my-component {^@do-something}="doFooBar" /> 
<button ($click)="doFooBar">Button</button> 

und der Code:

can.Component.extend({ 
    tag: "my-component", 
    template: can.view('my-component-template'), 
    viewModel: can.Map.extend({ 
    doSomething: function() { 
     alert('We did something'); 
    } 
    }) 
}); 

Aber warum das Beispiel ^@do-something="..." statt ^@doSomething="..." verwenden ??

DOM-Knoten Attribute Fall unempfindlich, so gibt es keine Möglichkeit, den Unterschied zwischen doSomething="" zu sagen, DoSomEthiNg="" oder DOSOMETHING="" - alle drei sind gleichwertig. CanJS folgt der Arbeitsweise von Browsern, indem Attribute mit Bindestrichen in camelCase konvertiert werden und umgekehrt.

Berücksichtigen Sie native Datenattribute - wenn Sie etwas wie <div data-my-foo="my bar"> tun, dann ist der Wert über JavaScript zugänglich, indem Sie [div].dataset.myFoo tun (beachten Sie die CamelCasing). Dasselbe gilt für css-Eigenschaften, bei denen css "background-color" verwendet, aber JavaScript backgroundColor verwendet. CanJS folgt dieser Konvention.