Question

我是新来的贪婪，并且正在与典型的＆＃34;如何做到这一点＆＃34; -Problem。我所拥有的是相当简单的，我知道如何去做，但我的方式是如此复杂，以至于我认为它不正确。

案例：

<ul>
  <li>{{link-to top-level}}</li>
  <li>{{link-to another-top-level</li>
  <ul class="submenu">
     <li>{{link-to submenu</li>
  </ul>
</ul>

应该发生的事情是：

单击路径时，相应的列表元素应变为活动状态。
单击子菜单时，相应的上部ul元素应该打开类

这是一个相当简单的jQuery案例，但我知道这不是可扩展和抽象的东西。

因此我开始采用这种方法：

为整个导航创建一个控制器/模板构造来处理它的状态（我还需要检查一些其他的东西，所以它派上用场了。）
因为ember将 active 类添加到锚标记我创建了一个组件来观察：

像：

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
      return this.get('childViews').anyBy('active');
  }.property('childViews.@each.active') 
});

用 {{linked-list}} 替换 li 元素确实有效。

但接下来呢？我是否需要添加另一个组件来观察组件以观察活动链接的内置行为？我是否必须为所有DOM元素编写专用的MVC类？

我认为必须有一种更简单的方法。我已经为这样一个简单的行为创建了一个完整的文件，我认为我完全走错了路。

我的直觉是：这就是视图逻辑，视图应该只是观察模板中的一些状态，并且就是它。

解决这个问题的最简单方法是什么？

Answer 1

我不知道我是否理解你的问题，但为什么要将类open添加到相应的上层元素？它自动被分配。使用正确的CSS，它应该按预期工作。

我创建了一个展示我的意思的小例子。请查看并告诉我，如果这是您的解决方案或此解决方案的问题。

http://emberjs.jsbin.com/wifusosadega/7/edit

修改

以下是Bootstrap风格版本：http://emberjs.jsbin.com/wifusosadega/9/edit。

如何从ember控制器或组件中观察车把模板中的多个状态

1 个答案: