下面，我们去定义这个用来返回 ture 或者 false 的方法，也就是这个作为 toggleClass 这个方法的开关的这个方法。

当它返回 ture 的时候，就会在元素上添加在 toggleClass 里面指定的 css 类，如果是 false ，就会从元素上去掉这个指定的 css 类。

我们希望在访问 active 这个地址的时候，把 completed 属性的值是 true ，也就是完成状态的任务，在它们上面去添加这个叫 hidden 的 css 类。

因为这个地址上显示的都是进行中的任务。

然后在访问 completed 这个地址的时候，如果在完成状态的任务项目上有 hidden 这个类的话，就把它去掉 ... 然后把这个类加到所有的进行中的任务项目上面。

在这个方法里在，我们先去得到任务项目的 completed 属性的值 ..

var completed = this.model.get('completed');

然后在它下面，用一个 return ... 去返回 ture 或者 false ...

return (
(!completed && app.TodoFilter === 'completed')
||
(completed && app.TodoFilter === 'active')
);

这里我们设置了两种情况，用一个 或逻辑运算符连接 ... 用这个运算符连接的两个表达式，如果计算出来的都是布尔值 ... 这样，两个表达式有一个返回 ture 的话，整个表达式就会返回 ture ... 如果两个表达式返回来的都是 false ，这个整个表达式就会返回一个 false ...

在第一个表达式里面，前面这块，用了一个 ! 号，它是一个否定的逻辑 ... 它后面这个东西如果计算出来的结果可以认为是 ture 的话，加上这个 ! 号就会返回一个 false ... 如果它后面的东西计算出来的东西认为是 false 的话，那么加上这个 ! 号，就会返回一个 ture ...

后面，又用了一个 逻辑与 的运算符 ... 用它连接的两个东西，如果第一个东西返回 false ，就会返回 false ... 不然的话，就会返回第二个东西 ...

这里又判断了一个，前面这块计划出来的结果是否等于 completed ... 这里的 app.TodoFilter 表示的就是当前地址上的参数 ...

假设

下面， 我们假设一个任务项目的状态是完成的，也就是它的 completed 属性的值是 ture ，并且，当前访问的地址是应用的首页 ...

在这个用逻辑或连接的两个表达式里的第一个表达式里面，首先，让这个 completed 属性的值变成了 false ... 这样用逻辑与连接的两个东西就会返回这个 false ... 然后再进入到第二个表达式里面，completed 的值是 ture ，所以会返回第二个表达试 ... app.TodoFilter 当前的值是空的 ... 因为我们访问的页面是应用的主页 ... 这个地址上没有参数的值 ...

所以，在这里计划出来的结果也就不会等于 active ，这样就会返回 false ... 两个用逻辑或连接的表达式都返回 false ... 整个表达式就会返回 false ...

这样，这个 isHidden 这个方法返回的值就会是 false ... 在 toggleClass 这个方法里面，如果开关返回 false，就会从元素上去掉这个指定的类 ...

也就是，完成状态的任务，在应用的主页上，如果它上面有 hidden 这个类的话，就会去掉它。

下面， 我们再分析一种情况，这次我们假设任务项目的状态是未完成的 ... 并且访问的是 active 这个页面的话 ... 会发生什么呢 ...

首先，未完成的任务的 completed 的值是 false .... 用否定逻辑运算出来的结果就会是 ture ... 这样， 这个用逻辑与连接的东西就会返回第二个表达式。因为当前是 active 这个地址 ... 所以，这个 app.TodoFilter 的值就会是 active ... 判断一下，是否等于 completed 的值，结果是 false ... 因为 active 不可能等于 completed .. 所以，这个表达式就会返回一个 false ...

接着再到第二个表达式里去运算一下 .. 因为 completed 的值是 false ... 这样这个表达式也就会返回一个 false ... 用逻辑或连接的两个表达式，都返回的是 false ... 整个表达式也就会返回一个 false ..

这样也就是，在 active 这个地址上，如果任务的状态是未完成 ... 就会去掉在它上面的 hidden 这个 css 类。

如果在这个 active ，显示未完成的任务的地址上 ... 如果任务的状态为已完成 ... 也就是它的 completed 属性的值是 true ...

用否定逻辑计算以后，这个值就是 false ... 这样在第一个表达式里计算出来的结果就是 false 。再看第二个表达式 ...

completed 属性的值是 true ... 所以会用第二个表达式 ... 也就是这个 app.TodoFilter ... 因为是在 active 这个页面，所以，app.TodoFilter 的值就是 active .... active 等于 active ... 这样这个表达式就会返回 true ... 用逻辑或计算出来的结果也就会返回 true ...

这样的话，就会在这个任务项目上去添加这个 hidden 类 .... 也就会把它隐藏起来 ...

下面，在这个模型视图的 render 方法里面，我们可以再去执行一下这个 toggleVisible 方法

this.toggleVisible();

测试

保存 ... 回到浏览器 ...

刷新一下 .... 点击 进行中 ... 这样会把所有完成状态的任务隐藏起来 ...

再点一下完成 ... 会去掉完成状态的任务项目上面的 hidden 类，把它们显示出来 ... 然后在未完成的任务项目上面添加一个 hidden 类，把它们隐藏起来 ....