CanJS по клику за пределами компонента, воздействующего на компонент

Question

Я хотел бы добавить слушателя события в <some-component> что реагирует на кнопку.

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

Я уверен, что это действительно просто. Я очень новичок в CanJS и работаю над этим.

<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>

Я пытался добавить $('body').on('click', '.click', function() {}); к компоненту, и это не похоже на работу. Я читал много документации, но мне все еще не хватает фундаментального понимания.

ОБНОВИТЬ

Я попробовал это:

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

со слушателем события в some-component-main

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

Но это тоже не сработало.

Answer 1

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

со слушателем события в some-component-main

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

Это сработало, когда я понял, что компоненты, оканчивающиеся на число, вызывают другие проблемы, которые мешают этому.

Answer 2

Вы можете сделать вещи внутри своего компонента доступными для родительской области, используя {^property-name} или же {^@method-name} синтаксис. Прочитайте об этом здесь: https://canjs.com/docs/can.view.bindings.toParent.html

Вот скрипка: http://jsbin.com/badukipogu/1/edit?html,js,output

В следующем примере реализует doSomething метод и мы кнопка для вызова этого метода при нажатии. Мы выставляем метод как "doFooBar".

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

и код:

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

Но почему пример использует ^@do-something="..." вместо ^@doSomething="..."??

Атрибуты узла DOM нечувствительны к регистру, поэтому нет никакой возможности определить разницу между doSomething="", DoSomEthiNg="", или же DOSOMETHING="" - все три эквивалентны. CanJS следит за тем, как работают браузеры, конвертируя атрибуты с тире в camelCase и наоборот.

Рассмотрим собственные атрибуты данных - если вы делаете что-то вроде <div data-my-foo="my bar">, то значение доступно через JavaScript, выполнив [div].dataset.myFoo (обратите внимание на верблюжий корпус). То же самое относится к свойствам css, где css использует "background-color", но использует javascript backgroundColor, CanJS следует этому соглашению.