获取backbone视图中snap.svg对象的值

Question

在下面的代码中，我希望在单击svg符号时创建一个like按钮的功能。我在获取sPaper、sPolyFill和sPolyEmpty的值时遇到了麻烦。到目前为止，它们返回的是未定义的。

我需要将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);
        }
    }

});

Answer 1

好的，我通过以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函数中实现symbolAnim的功能

Answer 2

对于我的like按钮函数，它在事件中被触发为"click selector": "like"，我想出了以下几点。然而，这只起作用一次。因此，当我第一次单击该按钮时，它会添加liked类并删除unliked类，这是html元素的缺省设置。然后，当再次单击它时，它将删除liked类并添加unliked类。到目前为止，它的工作与预期的一样。问题是，当我试图再次点击它，再次喜欢它时，什么也没有发生。它不再调用like函数，类仍然是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"); 
}