在複選框單擊，更改哪些按鈕可以點擊

Question

我現在開始在燼，我已經做了我所有的靜態應用程序，所以我「只」需要創建頂部的燼層。

在我的活動頁面中，我有一個列表，顯示事件（事件來自我的數據庫）。

events.js：

export default = Ember.Route.extend({ 
model() { 
    return this.store.findAll('event'); 
} 
}); 

在我的模板，我正在做一個循環，這將打印這樣的事情：http://codepen.io/anon/pen/YydjwV正如你所看到的，是靜態的。

在該頁面中我有一個控制器，它會根據選中複選框控制措施：

<ul class="controller__list"> 
    <li class="controller__item"> 
    <span class="controller__legend"> New </span> 
    </li> 
    <li class="controller__item"> 
    <span class="controller__legend"> Edit </span> 
    </li> 
    <li class="controller__item"> 
    <span class="controller__legend"> Delete </span> 
    </li> 
</ul> 

所以..根據複選框選中的號碼，我希望讓這個動作點擊：

New action = 0 - Infinity checkbox checked (always allowed) 
Edit action = 1 - 1 checkboxes checked 
Delete action = 1 - Infinity checkbox checked 

我的問題......我如何將這與動作綁定？我真的是新來的Ember，這是非常核心的水平，我認爲..我正在學習很多，但學習曲線是如此瘋狂..所以..我想，我怎麼能這樣做呢？首先，我需要在輸入中綁定動作，對嗎？所以：

{{input type="checkbox" action='checkBoxClicked'}} 

，並在我的EventController：

export default = Ember.ArrayController.extend({ 
actions: { 
    checkBoxClicked() { 
     // WHAT NOW? HOW DISABLE THE BUTTONS? 
    } 
} 
}); 

我不想知道如何保存，刪除，編輯等。這認爲是容易的，我的問題是瞭解如何使用組件並根據操作來操作html。

好，我是不是要求一個完整的答案，我知道SOF是不是這樣的論壇，但光會很不錯..一些教程，什麼都..

Answer 1

1路：

您需要2個屬性來控制某些動作是否可以運行。讓我們把它叫做：

• allowEdit
• allowDelete

然後在新的，編輯先刪除操作檢查屬性的值，如果這個動作運行。例如：

actions: { 
    edit() { 
    if (!this.get('allowEdit')) { 
     // action not allowed 
     return; 
    } 
    // your logic 
    } 
} 

然後維持數屬性，它會記錄多少複選框被選中，並根據它的值設置allowEdit和allowDelete爲正確的值。

第二個辦法：

你也可以將allowEdit和allowDelete這將取決於model.@each.checked，計算函數裏面，你可以檢查有多少記錄具有checked設置爲true和（環路爲例）算來計算性能。如果（用於編輯）檢查記錄的此計數爲1，則可以從計算函數true返回。否則，false。

最重要的部分是添加checked屬性裏面模板複選框每個在這裏你遍歷你的事件模型迴路：

{{#each model as |item|}} 
    {{input type='checkbox' checked=item.checked}} 
{{/each}} 

當複選框是我可以改變allowX的狀態檢查.. 對嗎？

是的，你能做到這一點，例如像：

allowEdit: Ember.computed('model.@each.checked', function() { 
    let count = 0; 
    this.get('model').then(model => { // or simply let model = this.get('model'); 
    model.forEach(item => { 
     if (item.get('checked')) { 
     count += 1; 
     } 
    }); 
    if (count === 1) { 
     return true; 
    } 
    return false; 
    }); 
}) 

但怎麼樣在這個按鍵綁定類？例如..我有一個 類控制器 - 禁用..我想檢查每一個 複選框，單擊刪除此上課時間..

您可以使用控制器屬性在模板中添加或刪除類，例如：

<span class="controller__legend {{if allowEdit 'allow-edit' 'disable-edit'}}"> Edit </span>