Javascript:在另一个方法中调用一个方法

时间:2015-09-05 22:59:34

标签: javascript function vue.js

我有一个简单的应用程序,触发布尔值并将任务设置为已完成:

但我希望能够使用“全部完成”按钮并设置完成每项任务。这在这里工作正常:

* {padding:0;margin:0;font-family:Helvetica,sans-serif;font-weight:normal}
body, html {width: 100%;height: 100%;}
ul {list-style:none;padding-left:10px;}

#siteWrapper{
	overflow:hidden;
	position:relative;
	width: 100%;
	height: 40%;
	background: lightgrey;	
}
#canvasWrapper {
	position:absolute;
	top: 0;
	right:-400px;
	width: 400px;
	height: 100%;
	background: #3186CD;	
}
#siteWrapper, #canvasWrapper {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition:	.3s ease all;
	transition: .3s ease all;
}
#siteWrapper.toggleNav #canvasWrapper { /* quite possibly wrong... */
	-webkit-transform: translateX(-400px);
	transform: translateX(-400px);	
}

http://codepen.io/anon/pen/avzMYr

但是我不想直接设置它,而是想使用这样调用的方法,因为我有很多其他需要分离的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="siteWrapper">
    <h1>Off Canvas Menu</h1><br>
    <h3>This should slide to the left! Some more text to have something left on the canvas...</h3><br>


	<div id="canvasWrapper" >
    	<div id="menu">
        	<ul>
            	<li>home</li>
                <li>infos</li>
                <li>something</li>
                <li>contact</li>
            </ul>
        </div>    
    </div>
</div>
<a href="#" id="toggleMenu">toggle Menu</a>

然而这不起作用,请看这里:

http://codepen.io/anon/pen/EVaMLJ

知道如何在completeAll方法中调用“completeTask(task)”方法吗?

2 个答案:

答案 0 :(得分:5)

您的问题是this回调中的.forEach()值与外界的值不同。您可以保存this的外部值,然后使用该保存的版本来获得您想要的内容:

  completeAll: function() {
    var self = this;
    this.tasks.forEach(function(task) {
      self.completeTask(task);
    });
  },

答案 1 :(得分:4)

您可以使用绑定在以下方法中设置completeAll: function() { this.tasks.forEach(function(task) { this.completeTask(task); }.bind(this)); } 值:

scapy