在主干视图中更新相似按钮的状态

Question

在下面的代码中，我有一个从另一个视图扩展的视图(但不继承任何功能，只呈现模板)和一个我现在要实现的模型。我的视图是一个like按钮，每次加载页面时，我都需要从服务器检索like按钮的状态。我不知道如何用这个模型来做这件事。我需要在模型中使用Ajax调用从服务器检索状态，还是该调用属于视图？

这是我的密码：

var likeButton = Backbone.Model.extend ({

    initialize: function () {
        this.isLiked = /* need something here! Ajax call to get state of button from server? */
    }
});

var LikeButtonView = BaseButtonView.extend({ // extends form a previews view which simply extends from backbone and render's the template

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

    events: {
        "click .icon": "like",
    },

    model: new likeButton (),

    initialize: function (options) {
        BaseButtonView.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
        this.likeButn = $("button.icon", this.$el);
        this.svgNode = this.likeButn.find("svg").get(0); // find the svg in the likeButn and get its first object
        this.sPaper = Snap(this.svgNode); // pass in the svg object into Snap.js
        this.sPolyFill = this.sPaper.select('.symbol-solid');
        this.sPolyEmpty = this.sPaper.select('.symbol-empty');

        if (this.model.isLiked) {
            this.likeButn.addClass("liked");
        } else if (!this.model.isLiked) {
            this.likeButn.addClass("unliked");
        }

    },

    like: function() {
        this._update();
    },

    _update: function () {
        if ( !this.isLiked ) { // if isLiked is false, remove class, add class and set isLiked to true, then animate svg to liked position
            this._like();
        } else if ( this.isLiked ) { // is isLiked is false, remove class, add class, set isLiked to false, then animate svg to unliked position
            this._unlike();
        }
    },

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

    _unlike: function() {

        this.likeButn.removeClass("liked");
        this.likeButn.addClass("unliked");
        this.isLiked = false;
        this.sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
        this.sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
    }
});

Answer 1

有三种方法可以实现' like‘按钮对页面当前状态的了解:从HTML传递的隐藏字段、对服务器的Ajax调用，或者在类似模型的状态已经激活的情况下生成javascript服务器端。

让我们从基础开始。你的代码有点乱。模型包含应用程序的状态，视图只不过是一种显示状态、在状态更改时接收消息以更新显示的方式，以及向模型发送消息以更改状态的方式。模型和视图通过Backbone.Events通信，视图和DOM通过jQuery.Events通信。你必须学会把这两者分开在你的脑海里。

在这里，我已经将您的“喜欢”模型转换为一个实际的模型，以便Backbone.Event集线器可以看到您所做的更改。

var likeButton = Backbone.Model.extend ({
    defaults: {
        'liked': false
    }
});

现在，在您的视图中，初始呈现将从模型中提取状态。当发生DOM事件(在'events‘对象中描述)时，您的工作是将其转换为模型上的状态更改，因此我的"toggleLike“只更改模型，而不是视图。但是，当模型发生变化(显式地，当模型的“喜欢”字段发生变化时)，视图将自动更新。

这就是为什么脊骨如此酷的原因。这是视图自动反映模型的实际情况的方式。你只需要把模型做好，视图就能工作了。您可以协调视图在初始化代码中反映模型的方式，在初始化代码中，视图很小，很容易推理您所关心的模型中的哪些事件。

var LikeButtonView = BaseButtonView.extend({ 

    template: _.template($('#like-button').html()),

    events: {
        "click .icon": "toggleLike",
    },

    initialize: function (options) {
        BaseButtonView.prototype.initialize.call(this, options); // inherit from BaseButtonView
        // A shortcut that does the same thing.
        this.likeButn = this.$("button.icon");
        this.model.on('change:liked', this._updateView, this);
    },

    render: function() {
        BaseButtonView.prototype.render.call(this);
        // Don't mess with the HTML until after it's rendered.
        this.likeButn.addClass(this.model.isLiked ? "liked", "unliked");
    },

    toggleLike: function() {
        this.model.set('liked', !this.model.get('liked'));
    },

    _updateView: function () {
        if (this.model.get('liked')) {
            this._showLikedState();
        } else {
            this._showUnlikedState();
        }
    }
});

类似的模型是如何初始化的，正如我前面所说的，取决于您。您可以在模型的选项上设置URL，并在页面的启动代码中告诉它"fetch"，在这种情况下，它将从服务器上的REST端点获取状态。或者您可以将其设置为默认的'false‘。或者您可以在隐藏的HTML (隐藏的div或其他东西)中设置它，然后使用页面启动代码找到它：

new LikeButtonView({model: new LikeButton({}, {url: "/where/page/state/is"}));

或

new LikeButtonView({model: new LikeButton({liked: $('#hiddendiv').data('liked')}, {}));

如果要保存喜欢的状态，我会推荐URL。那你就有地方保存数据了。