EmberJS 2.7 - 如何绑定属性“禁用”一个按钮 [英] EmberJS 2.7 - how to bind attribute 'disabled' for a button

问题描述

此官方指南介绍如何绑定boolean属性为HTML元素的disabled属性。然而，它谈到控制器。

This official guide describes how you can bind a boolean property to disabled attribute of a HTML element. Yet it talks about a controller.

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

I have a button, that when clicked transitions the route (sorry it has to be a button and cannot be a link-to):

/templates/trails.hbs

/templates/trails.hbs

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

（route-action是一个帮助器，允许我在路由中使用闭包动作）

(route-action is a helper that allows me to use closure actions in routes)

/routes/trails.js

/routes/trails.js

import Ember from 'ember';

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

所以，点击按钮后，路由更改为trails.new

So, after the button is clicked, the route is changed to 'trails.new'

/routes/trails/new.js

/routes/trails/new.js

import Ember from 'ember';

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

此属性似乎被忽略，没有我预期的那样被绑定。我还尝试添加一个控制器：

This property appears to be ignored and is not bound as I had expected it would be. I also tried adding a controller:

/controllers/trails/new.js

/controllers/trails/new.js

import Ember from 'ember';

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

那么官方指南如何建议似乎不起作用？我在这里缺少什么样的余烬魔法？

So how does the official guide suggest something that seems to not work? What piece of ember magic am I missing here?

推荐答案

在一些挖掘之后，我发现我正在努力做的不是正确的方法去做这个。我必须添加一个控制器/ trails.js，并将属性'isEditing'放在那里。

After some digging around I discovered that what I was trying to do is not the right way to go about this at all. I would have to add a controller/trails.js and put the property 'isEditing' in that.

所以我把它重构成一个组件：add-new-button。这是一个更为绝望的方式。

So I refactored this into a component: add-new-button. This is a far more 'ember' way.

首先，我需要一个初始化程序（感谢这个问题）：

First, I need an initializer (thanks to this question):

app / initializers / router.js

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
};

（这将路由器注入到组件中，所以我可以观察它的更改，还可以抢当前路线）

(this injects the router into the component, so I can watch it for changes and also 'grab' the currentRoute)

我的代码重构到组件中：

My code refactored into the component:

app / components / add-new-button。 js

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

templates / components / add-new-button.hbs

templates/components/add-new-button.hbs

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

templates / trails.hbs

templates/trails.hbs

{{add-new-button}}

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

The beauty of this is now I can use this button on my other top level templates to trigger route changes to the new route for each resource (and disable the button on arrival at the new route).

注意

return ~currentRoute.indexOf('new');

正在路由上进行子字符串检查，如果发现'new'返回true，否则返回false 。请参阅此。

is doing a substring check on the route, if it finds 'new' returns true, otherwise returns false. See this.

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

In ES6 it can be replaced with (so I have!):

return currentRoute.includes('new);

这篇关于EmberJS 2.7 - 如何绑定属性“禁用”一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！