Question

使用骨干网遇到了几天的问题，无法找到解决方法或在stackoverflow上找到解决方案。

我使用Rails 3.1 +最新主干（+ coffeescript）：

以下是我的一个观点作为例子（所有观点都有同样的问题）：

Blog.Views.Payment ||= {}

class Blog.Views.Payment.PaymentView extends Backbone.View
  className:  'payment_method'
  tagName:    'td'
  events:
    'click #renderPayment':  'renderPayment'

  initialize: ->
    # CAN'T access @options.payment_methods here 
    @options.payment_methods.bind(###stuff###)

  render: ->
    # CAN'T access @options.payment_methods here either...
    $(@el).html ("### something with #{@options.payment_methods or @options.payment_methods.model}")
    return @

  updateView: ()->
    # updating view stuff...

  renderPayment:  ->
    # ACCESSING @options.payment_methods fine here!!!
    if ($("#payment_details").length == 0)
      $(@el).append("<ul id='payment_details'>
                       <li id='payment_type'>#{@options.payment_methods.get(1).get('payment_type')}</li>
                     </ul>
                       ").effect("highlight", 700)

在我运行示例的前两种情况中，浏览器告诉我@ options.payment_methods未定义，第三种情况正常。

第二件事是我无法访问已经“硬编码”到页面中的任何DOM元素，而不是由Javascript创建的。我知道原因并且已经在Stackoverflow上阅读了关于它的帖子，但是我无法获得任何解决方案。任何提示都非常赞赏。

祝你好运，菲尔

编辑：它似乎与访问页面上对象的时间有关，类似于访问页面的硬编码DOM元素。如果我按如下方式编辑我的视图，即使我能够在代码中的那个点之前，我也无法访问@ options.payment_methods。

# changed "renderPayment" to "$(document).ready" or just "$" in coffeescript
$  ->
  # ACCESS NOT possible anymore
  if ($("#payment_details").length == 0)
    $(@el).append("<ul id='payment_details'>
                     <li id='payment_type'>#{@options.payment_methods.get(1).get('payment_type')}</li>
                   </ul>
                     ").effect("highlight", 700)

EDIT2：添加了我相应的路由器文件:(这只是backbone-rails gem示例“博客”的修改版本）

class Blog.Routers.PostsRouter extends Backbone.Router
  initialize: (options) ->
    @posts = new Blog.Collections.PostsCollection()
    @posts.reset options.posts

    # ... other collections

    # fetch payment_methods collection
    @payment_methods = new Blog.Collections.PaymentMethodsCollection()
    @payment_methods.reset options.payment_methods
    @payment_methods.fetch()

    @model = ({posts: @posts, mails: @mails, addresses: @addresses, purchases: @purchases, payment_methods: @payment_methods})

  routes:
    "/new"            : "newPost"
    "/index"          : "index"
    "/:id/edit"       : "edit"
    "/:id"            : "show"
    ".*"              : "index"


  # main view
  index:  ->

    # render Product Info View
    @view = new Blog.Views.Product.ProductView(purchases: @purchases)
    $("#product_1").html(@view.render().el)

    ##### view etc.

    # render Payment View
    @view5 = new Blog.Views.Payment.PaymentView(payment_methods: @payment_methods)
    $("#customer_1").append(@view5.render().el)

   ### other views...

我的付款模式：

class Blog.Models.PaymentMethod extends Backbone.Model
  paramRoot: 'payment_method'

  defaults:
    payment_type: null
    # ...

class Blog.Collections.PaymentMethodsCollection extends Backbone.Collection
  model: Blog.Models.PaymentMethod
  url: '/payment_methods'

Answer 1

您确实需要查找并了解->和=>之间的区别。看起来您的类中的大多数方法都使用->，而它们应该使用=>。无论您使用@something，它都是this.something的快捷方式，=>确保this确实符合您的预期。使用->时，this将绑定到调用函数中的任何内容，而不是类实例。

Answer 2

将选项传递给视图的initialize方法。所以你可以这样直接访问它们。

initialize: (options) ->
  # Now you have options
  options.payment_methods.bind(###stuff###)

在@options中调用render()应该没问题，除非在视图的上下文中没有调用渲染，即来自其他一些回调。要解决此问题，请使用胖箭头定义render，并始终在视图的上下文中调用它。

render: =>
  $(@el).html( ...etc...)

如果要访问页面上已有的元素，则需要执行一些操作。最重要的是，将el中的DOM元素传递给视图构造函数，您的视图将“接管”并拥有该元素。例如..

view = new Blog.Views.Payment.PaymentView(
  el: $("#product_whatever").get(0)
)

然后在该视图中，您希望将jQuery查找的范围限定为视图的元素。例如：

render: =>
  $(@el).find('div.somewhere_else').html("change this")

coffeescript中的骨干快捷方式是

@$('div.somewhere_else').html(...)

祝你好运

Rails + Backbone.js：在视图中访问对象时遇到问题

2 个答案: