EmberJS 2.7 - 如何为按钮绑定属性“禁用”

Question

This 官方指南描述了如何将布尔属性绑定到 HTML 元素的禁用属性。然而，它谈到了一个控制器。

我有一个按钮，当点击该按钮时会转换路线（对不起，它必须是一个按钮，不能是一个链接）：

/templates/trails.hbs

<button type="button" class="btn btn-primary" disabled={{isEditing}} 
              onclick={{route-action 'addNew'}}>Add New</button>

（route-action 是一个助手，可以让我在路由中使用闭包动作）

/routes/trails.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    addNew() {
      this.transitionTo('trails.new');
    } 
  }
});

所以，点击按钮后，路由变成了'trails.new'

/routes/trails/new.js

import Ember from 'ember';

export default Ember.Route.extend({
  isEditing: true,
});

这个属性似乎被忽略并且没有像我预期的那样被绑定。我也尝试添加一个控制器：

/controllers/trails/new.js

import Ember from 'ember';

export default Ember.Controller.extend({
  isEditing: true,
});

那么官方指南是如何建议一些似乎不起作用的东西的呢？我在这里缺少什么灰烬魔法？

Answer 1

经过一番挖掘，我发现我试图做的根本不是正确的方法。我必须添加一个控制器/trails.js 并将属性“isEditing”放入其中。

所以我将它重构为一个组件：add-new-button。这是一种更“余烬”的方式。

首先，我需要一个初始化器（感谢this question）：

app/initializers/router.js

export function initialize(application) {
  application.inject('route', 'router', 'router:main');
  application.inject('component', 'router', 'router:main');
}

export default {
  name: 'router',
  initialize
};

（这会将路由器注入到组件中，因此我可以观察它的变化并“抓取”当前路由）

我的代码重构为组件：

app/components/add-new-button.js

import Ember from 'ember';

export default Ember.Component.extend({
  isEditing: function() {
    let currentRoute = this.get('router.currentRouteName');
    return ~currentRoute.indexOf('new');
  }.property('router.currentRouteName')
});

模板/组件/add-new-button.hbs

<button type="button" class="btn btn-primary" disabled={{isEditing}} 
        onclick={{route-action 'addNew'}}>Add New</button>

模板/trails.hbs

{{add-new-button}}

现在我可以在我的其他顶级模板上使用此按钮来触发对每个资源的新路线的路线更改（并在到达新路线时禁用该按钮）。

注意

return ~currentRoute.indexOf('new');

正在对路由进行子字符串检查，如果发现'new'返回true，否则返回false。见this。

在 ES6 中，它可以替换为（所以我有！）：

return currentRoute.includes('new);

Answer 2

您的模板是templates/trails.hbs，但您在子路由控制器controllers/trails/new.js 中设置了isEditing

你需要有controllers/trails.js和deinfe isEditing。

所以在routes/trails.js 中实现这个：

actions: {
    willTransition: function(transition) {
      if(transtions.targetName === 'trails.new'){
        this.controller.set('isEditing', true);
      }
      else{
        this.controller.set('isEditing', false);
      }
    }
  }