ember.js - 在点击 Action Ember 上更改 DIV 类

Question

我想根据 CLICK 操作更改 DIV 类。我正在尝试制作这样的 float 侧边栏http://startbootstrap.com/templates/simple-sidebar.html

这个演示只有三行代码来切换类。

<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");
    });
    </script>

我想以 Ember 的方式实现同​​样的目标。下面是我的 HTML 代码:

<div id="wrap">
    <div class="pull-left" id="main_menu">
    <ul class="list-group">
        <li class="list-group-item">{{#link-to "selectImage"}}<h4>Choose Picture</h4>{{/link-to}}</li>
        <li class="list-group-item">{{#link-to "message"}}<h4>Write Message</h4>{{/link-to}}</li>
        <li class="list-group-item"><a href="#"><h4>Account info</h4></a></li>
        <li class="list-group-item"><a href="#"><h4>Recent Orders</h4></a></li>
        <li class="list-group-item"><a href="#"><h4>How to</a></h4></li>
        <li class="list-group-item"><a href="#"><h4>FAQ</a></h4></li>
    </ul>
    </div>
    <!-- Begin page content -->
        <div class="container" id="page_content">
            {{outlet}}
        </div>
    <!-- End page content -->
    </div>
</script>

<script type="text/x-handlebars" id="cards/index">
        <h1>
        <button class="pull-left btn btn-default" data-target="#main_menu" {{action 'changeClass'}}>
           <img src="images/icons/menu_tablet.png" class="main_menu"/>
        </button>
</script>

现在我不知道如何使用该操作来更改 WRAP div 中的类。我将非常感谢有关此问题的任何帮助。

Answer 1

您可以在 Controller 中为卡片/索引添加操作处理程序

Controller = Ember.ObjectController.extend({
  actions: {
    changeClass: function() {
     // Run logic here
    }
   }
})