Ember Bootstrap-Switch中的jQuery錯誤checked複選框數據綁定

Question

我試圖在Ember項目中使用Bootstrap-Switch。

我已經閱讀了很多其他SO帖子，博客和問題，並且已經空了。我已經走得比我在最後一天能夠做得更遠，但現在我正在陷入似乎是範圍問題。

我的ToggleView的hasChanged方法是問題的癥結所在。

App.ToggleView = Ember.View.extend(
    classNames: ['switch'] 

    template: Ember.Handlebars.compile '{{input type="checkbox" checked=isChecked disabled=disabled}}' 

    afterRenderEvent: -> 
    self = this 
    @$("[type='checkbox']").on "switchChange.bootstrapSwitch", @hasChanged 
    @$("[type='checkbox']").bootstrapSwitch('animate', false) 
    @$("[type='checkbox']").bootstrapSwitch('size', 'small') 

    hasChanged: (e, data) -> 
    @set "checked", data 
    #console.log data 
    return 
) 

的註釋console.log打印出開關的正確狀態。但是，控制檯抱怨@set。 （增值空間，因爲我想不通逃避眼前這個HTML）

Uncaught TypeError: Object #< HTMLInputElement> has no method 'set'

我試圖與@set "checked", @$("[type='checkbox']").prop("checked")替換該行，但只是給：

Uncaught TypeError: Object #< HTMLInputElement> has no method '$'

這裏是我」 m試圖使用這個視圖。

<div class="page-header"> 
    <div class="form-inline pull-right"> 
    <div> 
     <label>Enable Notifications {{view App.ToggleView id="notificationsToggle" controller=controller}}</label>  
    </div> 
    </div> 

    <h2>Notification Settings</h2> 
</div> 
{{isChecked}} {{disabled}} 

App.NotificationsController = Ember.Controller.extend(
    isChecked: true 
    disabled: false 

    isCheckedChanged: (-> 
    isChecked = @get('isChecked') 
    console.log isChecked 
).observes('isChecked') 
) 

這一切功能完美，如果我註釋掉afterRenderEvent，只是不使用自舉開關。我的數據綁定。我的控制器被checkedChanged火災。這很棒。

想法？

作爲參考

我在該項目中的另一部分的代碼塊，以允許我重寫運行jQuery的請求的任何觀點已經渲染後的方法。

Ember.View.reopen(
    didInsertElement: -> 
    @_super() 
    Ember.run.scheduleOnce "afterRender", this, @afterRenderEvent 
    return 

    afterRenderEvent: -> 
) 

UPDATE

我通過與匿名函數替換hasChanged解決了我的問題的範圍。 （至少我認爲這是爲什麼。）

除此之外，刪除isCheckedChanged和設置控制器的isChecked只需要我設置一個引用視圖的控制器，它的所有功能。

非常感謝查克！

更新控制器

App.NotificationsController = Ember.Controller.extend(
    isChecked: true 
    disabled: false 
) 

更新查看

App.ToggleView = Ember.View.extend(
    classNames: ['switch'] 
    controller = @controller 

    template: Ember.Handlebars.compile '{{input type="checkbox" checked=isChecked disabled=disabled}}' 

    afterRenderEvent: -> 
    self = this 

    @$("input[type='checkbox']").on "switchChange.bootstrapSwitch", (e, data) -> 
     self.controller.set "isChecked", data 
    @$("[type='checkbox']").bootstrapSwitch('animate', false) 
    @$("[type='checkbox']").bootstrapSwitch('size', 'small') 
) 

Answer 1

所以，我不是一個人的CoffeeScript，但好像你的isCheckedChanged觀測器設置來器isChecked它自己的價值。所以它永遠不會改變。

看起來好像您需要從視圖中的hasChanged處理程序中設置controller.isChecked。

so ...（我不知道CoffeeScript的，所以我在考慮什麼樣的變化你需要下面刺）

App.ToggleView = Ember.View.extend(
    classNames: ['switch'] 

    template: Ember.Handlebars.compile '{{input type="checkbox" checked=isChecked disabled=disabled}}' 

    afterRenderEvent: -> 
    self = this 
    @$("[type='checkbox']").on "switchChange.bootstrapSwitch", @hasChanged 
    @$("[type='checkbox']").bootstrapSwitch('animate', false) 
    @$("[type='checkbox']").bootstrapSwitch('size', 'small') 

    hasChanged: (e, data) -> 
    controller@set "isChecked", data 
    #console.log data 
    return 
) 

那麼你或許應該刪除isCheckedChanged觀察者，因爲它看起來像它可以在一個循環中被卡住。