2015-07-12 82 views
0

问候同胞Earthicans,打字稿jQuery的AJAX导航问题

下面的代码是为了应付简单的导航功能,用在我的网站上brianjenkins94.me和最近的一些重构后,我似乎已经打破了#nav.on(“点击“)事件处理程序,我似乎无法找出原因。

如果任何人都可以确定为什么这段代码不起作用,或者提供一些洞察力,以确定是否有更好的方法去做这件事,(我真的对正确的设计和正确的练习感兴趣,这个错误只是一个方便的借口做一个职位,并得到输入)它将不胜感激。

由于时间提前,

布赖恩


/// <reference path="jquery.d.ts" /> 
"use strict"; 

const SERVERNAME: string = "http://brianjenkins94.me/"; 
//const DOCUMENTROOT: string = "https://rawgit.com/brianjenkins94/local.blog.com/master/"; 

class Navigation { 
    private body: JQuery; 
    private nav: JQuery; 
    private navToggle: JQuery; 

    constructor(args: any[]) { 
    this.body = args[0]; 
    this.nav = args[1]; 
    this.navToggle = args[2]; 
    } 

    public init(): void { 
    this.stopPropogation(); 
    this.addClickListener(this.body); 
    this.addClickListener(this.navToggle); 
    this.addClickListener(this.nav); 
    this.addKeyCodeListener(27); 
    this.addLinkListener(); 
    } 

    private stopPropogation(): void { 
    (this.nav).on("click touchend", function(event: Event): void { 
     event.stopPropagation(); 
    }); 
    } 

    private addClickListener(target: JQuery): void { 
    (target).on("click touchend", (event: Event) => { 
     if (!(target === (this.body))) { 
     event.preventDefault(); 
     event.stopPropagation(); 

     if (target === this.navToggle) { 
      (this.body).toggleClass("nav-visible"); 
      return; 
     } 
     } 
     (this.body).removeClass("nav-visible"); 
    }); 
    } 

    private addKeyCodeListener(keycode: number): void { 
    $(window).on("keydown", function(event: JQueryKeyEventObject): void { 
     if (event.keyCode === keycode) { 
     (this.body).removeClass("nav-visible"); 
     } 
    }); 
    } 

    private addLinkListener(): void { 
    // FIXME: This can be optimized. 

    $("#nav .links a").click(function(event: Event): void { 

     if (!$(this).hasClass("active")) { 
     $("#nav .links a").removeClass("active"); 
     $(this).addClass("active"); 

     document.location.hash = $(this).attr("href"); 

     switch (document.location.hash) { 
      case "#home": 
      $.get(SERVERNAME + "home", function(data: string): void { 
       $("body").removeClass("nav-visible"); 
       $("#content").show(); 
       $("#iframe").html(data); 
       console.log("Loaded index.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#showcase": 
      $.get(SERVERNAME + "showcase", function(data: string): void { 
       $("body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded showcase.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#fraise": 
      $.get(SERVERNAME + "fraise", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded fraise.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#sharpcraft": 
      $.get(SERVERNAME + "sharpcraft", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded sharpcraft.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#tablature": 
      $.get(SERVERNAME + "tablature", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded tablature.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#web-design": 
      $.get(SERVERNAME + "web-design", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded web-design.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#about": 
      $.get(SERVERNAME + "about", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded about.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      case "#devtools": 
      $.get(SERVERNAME + "devtools", function(data: string): void { 
       $("#body").removeClass("nav-visible"); 
       $("#content").hide(); 
       $("#iframe").html(data); 
       console.log("Loaded devtools.html"); 
       $(window).scrollTop(0); 
      }); 
      break; 
      default: 
      // No corresponding link 
      event.preventDefault(); 
      $("#body").removeClass("nav-visible"); 
      break; 
     } 
     } else { 
     // Same link 
     $("#nav .links a").removeClass("active"); 
     $(document.location.hash).click(); 
     console.log("Simulating " + document.location.hash + " link click."); 
     } 
    }); 

    if (document.location.hash.length === 0) { 
     $("#home").click(); 
     console.log("Simulating #home link click."); 
    } else { 
     $(document.location.hash).click(); 
     console.log("Simulating " + document.location.hash + " link click."); 
    } 
    } 
} 

var Nav: Navigation = new Navigation([$("body"), $("#nav"), $("a[href=\"#nav\"]")]); 
Nav.init(); 

回答

0

$("#nav .links a").click(function(event: Event): void {

使用箭头函数,而不是做即$("#nav .links a").click((event: Event): void => {。这是因为JQuery事件处理程序中的this实际上是被单击的对象而不是包含的类。

下面是正确使用this视频:https://www.youtube.com/watch?v=tvocUcbCupA

+0

你认为你可以在这个有点扩大?我是否在所有情况下使用'''this''',或仅在涉及jQuery的情况下使用'''this'''?始终使用箭头功能是否更好? –

+0

你只需要注意事件处理程序。我已经扩大了答案。 http://stackoverflow.com/posts/31364157/revisions – basarat

+0

我做了你说的修改,但似乎还没有分配给$(“#nav”)的点击监听器。 –