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

在以下示例中，＆lt; my-compontent＆gt; 实现了doSomething方法，我们按下按钮在单击时调用该方法。我们将该方法公开为＆＃34; doFooBar＆＃34;。

<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">之类的操作，则可以通过执行[div].dataset.myFoo来访问该值（请注意camelCasing）。这同样适用于css属性，其中css使用＆＃34; background-color＆＃34;但javascript使用backgroundColor。 CanJS遵循这一惯例。

CanJS点击组件效果组件外部

2 个答案: