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

为什么用两种不同的方式书写皮革？如“隐藏完成”和“隐藏完成”？为什么在HTMl代码中用“-”写，而在JS代码中用驼峰写。

Answer 1

The expression {{hideFinished}} is calling a Template helper with that name. Somewhere in the body template should be some sort of helper defined like this:

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

It is usually used to compute some values that will be rendered into your template.

The second one is the name of the component on which an event is mapped to, in your case .hide-finished (allthough there needs to be a space between the event name and the selector, means change .hide-finished should be the correct name).

This event listens for the change event of an element with classname hide-finished and executes the defined function.

Note, that in your code you are currently listening to a change on a label element. In order to correctly capture the change it should be the input element.

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

A good start to read about how to use Templates in Meteor is the Blaze documentation, in your case especially these parts:

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

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

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

在meteorJS中，为什么hideFinished用不同的方式编写？

1 个答案: