2

我想在其中添加一个<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>

我尝试将 a 添加$('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");
  }
},

但这也没有用。

4

2 回答 2

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");
  }
},

一旦我意识到以数字结尾的组件会导致其他阻止它的问题，这确实有效。

于 2016-09-02T17:20:49.447 回答
1

您可以使用{^property-name}or{^@method-name}语法使组件内的内容对父范围可用。在这里阅读：https ://canjs.com/docs/can.view.bindings.toParent.html

这是一个小提琴： http: //jsbin.com/badukipogu/1/edit ?html,js,output

在下面的例子中，<my-compontent>实现了一个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 遵循浏览器的工作方式，将带有破折号的属性转换为驼峰式，反之亦然。

考虑本机数据属性 - 如果您执行类似的操作<div data-my-foo="my bar">，则可以通过 JavaScript 访问该值[div].dataset.myFoo（注意 camelCasing）。这同样适用于 css 使用“背景颜色”但 javascript 使用backgroundColor. CanJS 遵循这个约定。

于 2016-09-21T18:26:58.670 回答