为什么在meteorJS中hideFinished的写法不一样？

Question

Html代码-

    <body>
      <div class="container">
        <h1> TO DO</h1>
        <label class="hide-finished">
          <input type="checkbox" checked="{{hideFinished}}">
          Hide Finished Tasks
        </label>

JS code-

    Template.body.events({
            'Submit. new-task' : function(event){
                var title= event.target.title.value;
                Tasks.insert({
                    titile:title,
                    createdAt:new Date()
                });
                event.target.title.value="";
                return false;
            },
            'change.hide-finished':function(event){
                Session.set('hideFinished',event,target,checked);
            }
        });

为什么hide finish 写成两种不同的方式？作为 "hideFinished" 和 "hide-finished"？为什么在HTMl代码中写的是“-”，而在JS代码中是驼峰写法

Answer 1

表达式 {{hideFinished}} 正在调用具有该名称的模板助手。正文模板中的某处应该是这样定义的某种帮助程序：

Template.body.helpers({
  hideFinished () {
    // ... helper code
  }
})

它通常用于计算一些将呈现到您的模板中的值。

第二个是事件映射到的组件的名称，在您的例子中是 .hide-finished（尽管事件名称和选择器之间需要有一个 space，表示 change .hide-finished 应该是正确的名称）。

此事件侦听具有类名 hide-finished 的元素的 change 事件并执行定义的函数。

请注意，在您的代码中，您当前正在侦听 label 元素的更改。为了正确捕获更改，它应该是 input 元素。

<label>
  <input class="hide-finished" type="checkbox" checked="{{hideFinished}}">
  Hide Finished Tasks
</label>

阅读有关如何在 Meteor 中使用模板的良好开端是 Blaze 文档，在您的情况下尤其是以下部分：

http://blazejs.org/#Quick-Start

http://blazejs.org/guide/spacebars.html

http://blazejs.org/api/templates.html#Event-Maps

为什么在meteorJS中hideFinished的写法不一样？

In meteorJS, why is hideFinished written in different ways?

meteor