当导航栏中的按钮在ember中被点击时切换侧边栏

toggle sidebar when button in navbar is clicked in ember

本文关键字：侧边栏 ember 导航 按钮      更新时间：2023-09-26

我有两个组件：

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

在电脑导航栏里，我有一个按钮，我想切换侧边栏——活动类：

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

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

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

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

所以。。我更改默认值并发送到我的应用程序控制器：

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

现在。。如何抓取侧边栏并切换类？？我在这里有点迷路了。。我在写这个吗？

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

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

非常感谢！！！

假设在一个路由中同时使用两个组件，例如aroute，则可以在aroute中具有属性isOpen。您可以将此属性传递给这两个组件，然后如果在pc-navbar中对其进行了修改，则可以在pc-sidebar中观察到它。

您需要在组件所在的路由/控制器上有一个公共属性，并有一个切换此属性的操作。

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

然后只需从组件一触发操作，组件二就有一个绑定属性，可以用来显示或隐藏。

相关文章：