如何禁用某些列Ember js中的復選框？

Question

我是否可以禁用步驟2、3和4之外的復選框的其余部分？ 這些復選框是復選框組件的鏈接。 然后，我將復選框組件鏈接到route的列propertyName：“ active”處。 以下是路線代碼的一部分。

export default Route.extend({
    model() {
        let results = {
            workflow: {
                columns: [
                    {
                        "propertyName": "step",
                        "title": "Step",
                        editable: false
                    },
                    {
                        "propertyName": "workflowName",
                        "title": "Workflow Name",
                    },
                    {
                        "propertyName": "preferredName",
                        "title": "Your Company Preferred Name",
                    },
                    {
                        "propertyName": "active",
                        "title": "Active",
                        component: "adk-workflow-select-row",
                        editable: false
                    },
                    {
                        title: "Edit",
                        component: "edit-row",
                        editable: false
                    }],
                rows: [
                    {
                        step: '0',
                        workflowName: 'New',
                        preferredName: '新',
                    },
                    {
                        step: '1',
                        workflowName: 'Budget Approval',
                        preferredName: '預算批准',
                    },
                    {
                        step: '2',
                        workflowName: 'Creative',
                        preferredName: '創作的',
                    },
                    {
                        step: '3',
                        workflowName: 'Visualize',
                        preferredName: '想象',
                    },
                    {
                        step: '4',
                        workflowName: 'Implementation',
                        preferredName: '履行',
                    },
                    {
                        step: '5',
                        workflowName: 'In Play',
                        preferredName: '活性',
                    },
                    {
                        step: '6',
                        workflowName: 'Completed',
                        preferredName: '已完成',
                    },
                    {
                        step: '7',
                        workflowName: 'Canceled',
                        preferredName: '取消',
                    },
                ]
            },

這是adk-workflow-select-row，它是復選框組件。 下面的代碼是我如何渲染復選框。 這將啟用所有復選框。 但是我只需要啟用步驟2、3和4復選框即可。

{{#paper-checkbox value=isSelected onChange=(action "clickOnRow" index record)}}{{/paper-checkbox}}

Answer 1

您的問題很難回答，因為您沒有顯示相關的模板代碼。

通常，您會以某種方式在模板中調用您的復選框，您可以將其包裝在{{#if 。 您的代碼非常通用，但是我想這可能在您的edit-row組件中。 像這樣：

{{#if some condition}}
  {{#paper-checkbox value=isSelected onChange=(action "clickOnRow" index record)}}{{/paper-checkbox}}
{{/if}}

現在重要的問題是使用什么條件。 而這取決於您到底想要什么。 您要如何配置？ 您是否想以某種方式保持全局數組的含義，使rows的復選框具有如下所示的復選框？

{
  step: '2',
  workflowName: 'Creative',
  preferredName: '創作的',
  showCheckbox: true,
},

取決於此，您想要的可能是這樣的：

{{#if record.showCheckbox}}
  {{#paper-checkbox value=isSelected onChange=(action "clickOnRow" index record)}}{{/paper-checkbox}}
{{/if}}

---

通常，如果您是炭燼新手，我可以強烈建議您首先嘗試了解事情在不太常見的情況下的工作方式。 像您這樣的通用解決方案可能很棒，但很快就會變得非常復雜。