切换视图时为什么我的变量未定义？(Why are my variables undefined when switching views?)

对不起代码墙。我试图尽可能地简化它。我的控制台输出位于底部。我有一个两个视图页面。为了促进代码模块化，我的页面结构如下：

<html> <head> <script src="js/jquery.js"></script> <script src="js/view1.js"></script> <script src="js/view2.js"></script> <script src="js/main.js"></script> <style> #view2 { display: none; } #view3 { display: none; } </style> </head> <body> <div id="view1" class="box"> <div>View1</div> <button class="btn-show2">View2</button> <button class="btn-show3">View3</button> <button class="btn-echo">Echo Val</button> </div> <div id="view2" class="box"> <div>View2</div> <button class="btn-back">Back</button> <button class="btn-echo">Echo Val</button> </div> <div id="display-out"></div> </body> </html>

现在每个“视图”都有自己的关联JS文件，如下所示。例如view1.js是：

$(document).ready(function(e) { $("#view1 .btn-show2").click(function(e) { showContainer("view2"); }); handlers['btn-echo']['view1'] = function(params) { $("#display-out").html("View1 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random()); }; init['view1'] = function(params) { console.log('view1 init routine. Active View is ' + active_view); }; destroy['view1'] = function(params) { console.log('view1 destroy routine. Clean up view 1'); }; });

和view2.js是：

$(document).ready(function(e) { $("#view2 .btn-back").click(function(e) { showContainer("view1"); }); handlers['btn-echo']['view2'] = function(params) { $("#display-out").html("View2 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random()); }; init['view2'] = function(params) { console.log('view2 init routine. Active View is ' + active_view); }; destroy['view2'] = function(params) { console.log('view2 destroy routine. Clean up view 2'); }; });

最后，main.js具有以下结构：

正如您所看到的，当视图更改时，全局active_view会更改（来自showContainer）。但是这是以下控制台输出：

view1 init routine. Active View is view1 view1.js:11 //Start on view1 In initial click delegatorm active_view is view1!! test.html:45 //Click Echo view1 destroy routine. Clean up view 1 view1.js:15 //Click switch to view2 In showContainer, active_view is now view2!! test.html:56 view2 init routine. Active View is view2 view2.js:11 In initial click delegatorm active_view is false!! //Click echo again

这里发生了什么？为什么active_view会变错？

Sorry for the wall of code. I tried to simplify it as much as possible. My console output is at the bottom. I have a two view page. In order to promote code modularity my page structure is as follows:

<html> <head> <script src="js/jquery.js"></script> <script src="js/view1.js"></script> <script src="js/view2.js"></script> <script src="js/main.js"></script> <style> #view2 { display: none; } #view3 { display: none; } </style> </head> <body> <div id="view1" class="box"> <div>View1</div> <button class="btn-show2">View2</button> <button class="btn-show3">View3</button> <button class="btn-echo">Echo Val</button> </div> <div id="view2" class="box"> <div>View2</div> <button class="btn-back">Back</button> <button class="btn-echo">Echo Val</button> </div> <div id="display-out"></div> </body> </html>

Now each "view" has it's own associated JS file as follows. For example view1.js is:

$(document).ready(function(e) { $("#view1 .btn-show2").click(function(e) { showContainer("view2"); }); handlers['btn-echo']['view1'] = function(params) { $("#display-out").html("View1 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random()); }; init['view1'] = function(params) { console.log('view1 init routine. Active View is ' + active_view); }; destroy['view1'] = function(params) { console.log('view1 destroy routine. Clean up view 1'); }; });

and view2.js is:

$(document).ready(function(e) { $("#view2 .btn-back").click(function(e) { showContainer("view1"); }); handlers['btn-echo']['view2'] = function(params) { $("#display-out").html("View2 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random()); }; init['view2'] = function(params) { console.log('view2 init routine. Active View is ' + active_view); }; destroy['view2'] = function(params) { console.log('view2 destroy routine. Clean up view 2'); }; });

Finally, main.js has the following structure:

As you can see the global active_view gets changed when the view is changed (from showContainer). However here is the following console output:

view1 init routine. Active View is view1 view1.js:11 //Start on view1 In initial click delegatorm active_view is view1!! test.html:45 //Click Echo view1 destroy routine. Clean up view 1 view1.js:15 //Click switch to view2 In showContainer, active_view is now view2!! test.html:56 view2 init routine. Active View is view2 view2.js:11 In initial click delegatorm active_view is false!! //Click echo again

What is going on here? Why does active_view become false?

最满意答案

从查看CSS，您有3个容器.box 。所以它意味着在你的循环showContainer ，你将有3次迭代。

现在，您将进入视图＃2，但最后一次迭代在＃3上。现在让我们看看会发生什么（我们跳过第一次迭代）：

//Loop 2 var id = $(this).attr('id'); //id = 'view2' if(id == container_id) // 'view2' == 'view2' : true active_view = container_id; active_view = 'view2' //Loop 3 var id = $(this).attr('id'); //id = 'view3' if(id == container_id) // 'view3' == 'view2' : false else if(active_view = id && typeof destroy[id] == "function") // Your probleme is here

你看，这里有一个拼写错误，它应该是active_view == ... 现在，您要为active_view分配值

正在做的是一步一步：

active_view = id && typeof destroy[id] == "function"; //Step 1 active_view = 'view3' && typeof destroy[id] == "function"; //Step 2 active_view = true && typeof destroy[id] == "function"; //Step 3; Since left side is true, interpret right side active_view = typeof destroy[id] == "function"; //Step 4 active_view = typeof destroy['view3'] == "function"; //Step 5 active_view = false; //Step 6; Since the result in your log is false, I suppose destroy['view3'] is not a function

From looking at your CSS, you have 3 container .box. So it mean in your loop showContainer, you'll have 3 iteration.

Now, you are going to the view #2 but the last iteration is on the #3. now let see what happen (we skip the first iteration):

//Loop 2 var id = $(this).attr('id'); //id = 'view2' if(id == container_id) // 'view2' == 'view2' : true active_view = container_id; active_view = 'view2' //Loop 3 var id = $(this).attr('id'); //id = 'view3' if(id == container_id) // 'view3' == 'view2' : false else if(active_view = id && typeof destroy[id] == "function") // Your probleme is here

You see, you have a typo here, it should be active_view == .... Now you are assigning a value to active_view

what is is doing step by step :

active_view = id && typeof destroy[id] == "function"; //Step 1 active_view = 'view3' && typeof destroy[id] == "function"; //Step 2 active_view = true && typeof destroy[id] == "function"; //Step 3; Since left side is true, interpret right side active_view = typeof destroy[id] == "function"; //Step 4 active_view = typeof destroy['view3'] == "function"; //Step 5 active_view = false; //Step 6; Since the result in your log is false, I suppose destroy['view3'] is not a function

更多推荐

切换视图时为什么我的变量未定义？(Why are my variables undefined when switching views?)

最满意答案

发布评论取消回复

最近发表

热门文章

标签列表