Question

我有两个组成部分：

{{pc-sidebar}}
{{pc-navbar action='toggleSidebar'}}

在pc-navbar中，我有一个按钮，我想切换侧边栏 - 活动类：

<button {{action 'toggle'}}>toggle sidebar</button>

在pc-navbar.js中，我有以下内容：

  isOpen: true,
  actions: {
    toggle () {
        this.toggleProperty('isOpen');
        this.sendAction('action', this.get('isOpen'));
    }
  }

所以..侧边栏的默认值是打开的，当我点击时，我希望切换到下一个状态..是或否，取决于之前的状态。

所以......我改变默认值并发送给我的应用程序控制器：

  actions: {
    toggleSidebar (nextState) {
      console.log(nextState);
    }
  }

现在..我怎么能抓住侧边栏并切换课程？我在这里有点迷失..我在写这个吗？

在我的pc-sidebar.js中我有：

export default Ember.Component.extend({
  tagName: 'aside',
  classNames: ['sidebar', 'sidebar--active']
});

非常感谢!!!

Answer 1

假设您在一条路线中同时使用两个组件aroute，您可以在isOpen中拥有该属性aroute。您可以将此属性传递给这两个组件，然后如果在pc-sidebar中修改了该组件，则可以在pc-navbar中观察它。

Answer 2

您需要在路径/控制器上拥有组件所在的公共属性以及切换此属性的操作。

//index.js
export default Ember.Controller.extend({
  isOpen: false,
  actions: {
    toggleOpen: function() {
      this.toggleProperty('isOpen');
    }
});

在你的模板中：

//index.hbs
{{component-one toggleOpen="toggleOpen"}}
{{component-two isOpen=isOpen}}

一个组件需要知道该属性，因此它知道何时打开，另一个只想发送一个动作来打开/关闭它。

//component-one.js
export default Ember.Component.extend({
  actions: {
    toggleOpen: function() {
      this.sendAction('toggleOpen');
    }
});

然后只需从组件1触发操作，组件二具有可用于显示或隐藏的绑定属性。

在ember中单击导航栏中的按钮时切换侧栏

2 个答案: