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

这里是 fiddle：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');
    }
  })
});

But why does the example use ^@do-something="..." instead of ^@doSomething="..."??

DOM节点属性大小写不敏感，所以无法区分doSomething=""、DoSomEthiNg=""或DOSOMETHING="" - 这三个都是等价的。 CanJS 遵循浏览器的工作方式，将带有破折号的属性转换为驼峰式，反之亦然。

考虑本机数据属性 - 如果您执行类似 <div data-my-foo="my bar"> 的操作，则可以通过 JavaScript 通过执行 [div].dataset.myFoo（注意驼峰式大小写）来访问该值。这同样适用于 css 属性，其中 css 使用 "background-color" 但 javascript 使用 backgroundColor。 CanJS 遵循这个约定。

CanJS 在影响组件的组件外部单击

CanJS on click outside of component effecting component

canjs

donejs