backbone.js - 使用coffeescript登录和注销时通知事件 Backbone js

Question

我对主干js有点困惑。

我有多个 View ，它们根据 session 的不同而表现不同。 IE。当我登录时，我的所有 View 都将允许我喜欢评论并关注问题，但是当我注销时，与用户事件相对应的所有其他 View 都应提示登录表单。

所以，令人困惑的是，当我登录时，我应该如何通知其他 View ，以便它们允许我执行相应的事件。

我目前能够实现这一点，但我需要在登录后刷新页面，但这样 Backbone js的目的就没有实现。

用户模型:user.js.coffee

class window.User extends Backbone.Model
  urlRoot: '/users'

  isSignedIn: ->
    Boolean(@get('remember_token'))

  login: (attributes, options) ->
    options.url = Root + '/sessions'
    @save(attributes, options)

  signup: (attributes, options) ->
    options.url = Root + '/users/create'
    @save(attributes, options)

登录 View :signin_view.js.coffee

class window.UserView extends Backbone.View
  initialize: ->
    _.bindAll(this, 'onSignedIn', 'onSignedUp', 'onCommented')
    $(@el).show()

    if @model.isSignedIn()
      @showUserDetails()
    else
      Some code here

用户详细信息 View :user_detail_view.js.coffee

class window.UserDetailsView extends Backbone.View
  initialize: ->
    _.bindAll(this, 'onValidUser')
    @model.on('change', @onValidUser)

   if (@model.get('email'))
     @onValidUser()
   else
     @model.fetch()

   onValidUser: ->   
     @render()

  render: ->
    $(@el).show()
      this.$(".name").text(currentUser.get('user')['first_name'] + ' ' + currentUser.get('user')['last_name'])

现在我想通知我的关注 View 我已登录，并且我不应该再提示登录表单，事实上所有 View 都与用户事件相关

关注 View 看起来像这样

class window.FollowView extends Backbone.View
  initialize: ->
    $(@el).show()

如何实现这一目标？

提前致谢

Answer 1

我认为你有一些结构性问题。 “登录状态”实际上并不是用户的属性，而是整个应用程序的属性:如果他们没有登录，那么应用程序就没有用户，如果他们登录了，那么应用程序就没有用户。应用程序确实有一个用户。

所以您应该有一个具有用户属性的应用程序对象。当该人登录时，在应用程序对象上设置该用户；当用户退出时，清除该用户。

一旦上述内容到位，解决方案自然就出来了:我们使用的是 Backbone，因此一切都基于触发和监听事件，并且这里的事件是已登录和已退出。是什么触发了这些事件？应用程序对象确实如此。谁监听这些事件？关心某人是否签名的 View 。

假设您有一个像这样的应用程序类:

class App
    constructor: (@user_name) ->
        _(@).extend(Backbone.Events);
    sign_out: ->
        @user_name = null
        @trigger('signed-out')
    sign_in: (user)->
        @user_name = user
        @trigger('signed-in')
    user: ->
        @user_name

window.app = new App

然后关心用户的 View 可以执行如下操作:

initialize: ->
    app.on('signed-in signed-out', @render)

当有人登录或退出时，将调用它们的render方法；当然，render 方法会检查用户并显示适当的内容。

现场演示:http://jsfiddle.net/ambiguous/TfPf9/

实际代码可能希望对 app.off('signed-outsigned-in') 进行 remove 实现，以避免悬空监听器。

我在这里还有其他一些事情:

1. 使用bindAll对于 CoffeeScript 来说很少需要。而不是这个:

   _.bindAll(this, 'onSignedIn', 'onSignedUp', 'onCommented')
   

   用 => 定义方法:

   onSignedIn: => #...
   onSignedUp: => #...
   

2. 较新版本的 Backbone 会自动为您提供 el 的 jQuery/Zepto 包装版本，以便您可以将 $(@el).show() 替换为只是@$el.show()。