Question

This官方指南介绍了如何将布尔属性绑定到HTML元素的disabled属性。然而它谈到了控制器。

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

/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');
    } 
  }
});

因此，点击按钮后，路线将更改为＆＃39; trails.new＆＃39;

/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

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

您需要拥有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);
      }
    }
  }

Answer 2

经过一番挖掘后，我发现我试图做的事情并不是解决这个问题的正确方法。我将不得不添加一个控制器/ trails.js并将属性＆＃39; isEditing＆＃39;在那。

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

首先，我需要一个初始值设定项（感谢this question）：

应用程序/初始化/ router.js

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

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

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

我的代码重构为组件：

应用/组件/添加新-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')
});

模板/组件/添加新-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');

正在对路线进行子串检查，如果它找到了新的＆＃39;返回true，否则返回false。请参阅this。

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

return currentRoute.includes('new);

EmberJS 2.7 - 如何绑定属性＆＃39;禁用＆＃39;一个按钮

2 个答案: