使用Ember.js中的複選框切換並綁定布爾值

我試圖在綁定複選框（photoApproved）之間切換true和false值，但在我的控制器代碼中沒有那麼幸運。使用Ember.js中的複選框切換並綁定布爾值

這裏的photos_controller.js：

App.PhotosController = Ember.ArrayController.extend(

    photoApproved: ((key, value) -> 
    model = @get("model") 
    if value is 'undefined' 
     model.get "approved" 
    else 
     model.set "approved", value 
     model.save() 
     value 
).property("model.approved") 

)

這裏的template文件photos.hbs：

最後，這裏的model：

App.Photo = DS.Model.extend(
    name: DS.attr("string") 
    description: DS.attr("string") 
    image_url: DS.attr("string") 
    approved: DS.attr("boolean") 
)

我應該如何改變我的photoApproved功能得到事情正常工作？

來源

2014-02-25 gosseti

灰燼2.4答案：

<input type="checkbox" checked="{{if info.show_in_email 'checked'}}" onclick={{action (mut info.show_in_email) value="target.checked"}} />

其中info是灰燼模型和show_in_email是一個布爾字段。

來源

2016-03-18 13:34:02

我注意到兩兩件事：

photoApproved是集合的屬性，而不是一個單獨的模型。

你應該定義一個itemController爲PhotosController，並在那裏定義photoApproved：

App.PhotosController = Ember.ArrayController.extend(
    itemController: 'photo' 
) 

App.PhotoController = Ember.ObjectController.extend(

    photoApproved: ((key, value) -> 
    model = @get("model") 
    if value is 'undefined' 
     model.get "approved" 
    else 
     model.set "approved", value 
     model.save() 
     value 
).property("model.approved") 

)

接下來，我不明白爲什麼你需要定義photoApproved可言。當您在複選框上使用approved作爲選中值時，它已經綁定到模型。然後，您可以定義一個觀察者來保存模型（但我不確定以下控制器代碼是否正確）。

<li class="masonry-brick"> 
    <h3>Approved: {{approved}}</h3> 
    {{input type="checkbox" checked=approved class="toggle"}} 
    {{#link-to "photo" this}}{{name}}{{/link-to}} 
    <img {{bind-attr src=image_url}} alt="Logo"> 
</li> 

App.PhotoController = Ember.ObjectController.extend(
    approvePhoto: (-> 
    @get('model').save() unless @get('approved') 
).observes("approved") 
)

來源

2014-02-25 06:38:56 bazzel

啊，這看起來像一個更優雅的解決方案。唯一的問題是原始批准的值在加載時不具有約束力 - 默認情況下它們都是錯誤的。另外，當點擊複選框時，PUT請求僅在設置爲true時觸發。我需要它來設置兩個。 – gosseti

啊，解決了：除非@get（'approved'）'取消了這個訣竅。在下面回答它。 – gosseti

很棒的回答。太感謝了！ –

通過在approvePhoto函數除去unless @get('approved')解決。

# controller 
App.PhotoController = Ember.ObjectController.extend(

    approvePhoto: ((key, value) -> 
    @get('model').save() 
).observes("model.approved") 

) 

# template 
<li class="masonry-brick"> 
    <h3>Approved: {{approved}}</h3> 
    {{input type="checkbox" checked=approved class="toggle"}} 
    {{#link-to "photo" this}}{{name}}{{/link-to}} 
    <img {{bind-attr src=image_url}} alt="Logo"> 
</li>

來源

2014-02-26 19:56:24 gosseti

很酷。你甚至可以從觀察方法中移除'model.'。 – bazzel

使用Ember.js中的複選框切換並綁定布爾值

回答

相關問題