Question

我有一个Backbone / React应用程序。我试图将所有主干逻辑保留在主干View（本例中的FoodList）中，这样我就可以将方法传递给组件，让组件触发它们，然后在视图中运行必要的逻辑（即操作主干）收集），保持骨干业务不受反应的影响。

我遇到的麻烦是当我尝试从传递给组件的this方法访问doSomething值时，我得到的是窗口，而不是FoodView实例。在这种情况下如何绑定FoodList实例？

## BACKBONE VIEW:

FoodList = require '../components/FoodList'

class FoodView extends Backbone.View

    initialize:  =>        
        ...done() =>
        @renderFood()


    renderFood: ->            
        React.render(
                <FoodList
                    foods={@collection.foods.toJSON()}
                    doSomething={doSomething} ## method of interest
                />, 
                app.pageEl
            )

    doSomething: (e) ->
        console.log @ ## returns window.
        id = $(e.currentTarget).data('id') 
        @collection.makeAChange(id) ## I want to access the FoodView instance's collection


## REACT COMPONENT:

FoodList = React.createClass

    handleSomething: (e) ->
      @props.doSomething(e)

    render: ->
      return(
        ...
        <li data-id={id} onClick={@handleSomething}>dynamically generated</li>
        ...
      )

Answer 1

使用CoffeeScript，您只需使用胖箭头函数自动将FoodView::doSomething方法绑定到实例。另请参阅Bound functions。

class FoodView extends Backbone.View
    doSomething: (e) =>
        // `@` refers to the  FoodView instance

相当于

class FoodView extends Backbone.View
    constructor: ->
        @doSomething = @doSomething.bind(@)

    doSomething: (e) ->
        // `@` refers to the  FoodView instance

从传递到React组件并在那里触发的函数访问类实例

1 个答案: