在骨幹視圖中獲取snap.svg對象的值

在以下代碼中，我想在單擊svg符號時創建類似按鈕的功能。我無法獲得sPaper,sPolyFill和sPolyEmpty的值。只要他們返回undefined。在骨幹視圖中獲取snap.svg對象的值

我需要將symbolAnim函數集成到like和unlike函數中。我怎樣才能做到這一點？

var LikeButtonView = BaseButtonView.extend({ 

    template: _.template($('#like-button-test').html()), 
    sPaper: null, 
    sPolyFill: null, 
    sPolyEmpty: null, 

    initialize: function (options) { 
     BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView 
     this.butn = $("button.heart-icon", this.$el); 
     this.sPaper = Snap(heartIcon.get(0)); 
     this.sPolyFill = sPaper.select('.symbol-solid'); 
     this.sPolyEmpty = sPaper.select('.symbol-empty'); 
    }, 

    like: function() { 
     console.log("Like clicked"); 
     if (this.butn.hasClass("isLiked")) { 
      this.unlike(); 
     } else if (this.butn.hasClass("unliked")){ 
      this.butn.removeClass("unLiked"); 
      this.butn.addClass("isLiked"); 
      this.addBlur(); 
     } 
    }, 

    unlike: function() { 
     this.butn.removeClass('isLiked'); 
     this.butn.addClass("unLiked"); 
     this.addBlur(); 
    }, 

    symbolAnim: function(heartIcon, isLiked) { 

     if (isLiked === false) { 
      sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout); 
      sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout); 
     } else { 
      sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout); 
      sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout); 
     } 
    } 

});

來源

2014-11-05 hyprstack

好了，所以我的目標this.butn

initialize: function (options) { 
     BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView 
     this.butn = $("button.heart-icon", this.$el); 
     this.svgNode = this.butn.find("svg").get(0); 
     this.sPaper = Snap(this.svgNode); 
     this.sPolyFill = this.sPaper.select('.symbol-solid'); 
     this.sPolyEmpty = this.sPaper.select('.symbol-empty'); 
     console.log(this.sPaper);

得到了對象現在我需要在like和unlike funcitons實施的symbolAnim功能

來源

2014-11-05 15:17:27 hyprstack

-1

對於我喜歡按鈕的功能，這是在事件觸發時已經作爲"click selector": "like"，我已經拿出了以下內容。然而，這隻能工作一次。因此，當我第一次點擊該按鈕時，它會添加類liked並刪除類別爲unliked的類，這是html元素的默認類。然後再次點擊時，它將刪除liked類並添加unliked類。到目前爲止，它可以按需要工作問題是，當我嘗試再次單擊它時，再次喜歡它，並且沒有任何反應。它不再稱之爲類似的功能，並且類仍然是unliked。

什麼是造成這個問題，我該如何解決它？

like: function() {  
    if (this.butn.hasClass("liked")) { 
     this.unlike(); 
    } else if (this.butn.hasClass("unliked")) { 
     this.controller(); 
     console.log("Like clicked"); 
    } 
}, 

controller: function() { 
    this.butn.removeClass("unliked"); 
    this.butn.addClass("liked"); 
    this.sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout); 
    this.sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout); 
}, 

unlike: function() { 
    this.butn.removeClass('liked'); 
    this.butn.addClass("unLiked"); 
    this.sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout); 
    this.sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout); 
    console.log("Unliked"); 
}

來源

2014-11-05 16:21:05 hyprstack

在骨幹視圖中獲取snap.svg對象的值

回答

相關問題