javascript - Ember cli 切换侧边栏 "implementing the Jquery part?"

Question

我正在尝试在我的 ember 应用程序中实现一个小的切换站点栏。引导部分很容易实现。但是我不知道如何将 javascript 部分实现到 View 中。

我想在我的应用程序中使用的边栏:http://bootsnipp.com/snippets/featured/nav-sidebar-with-toggle-button

有人能告诉我如何修复 jQuery 部分吗？ (侧边栏处于事件状态，但在访问网站时必须处于非事件状态。用户单击选项按钮时，必须弹出打开站点栏)。

import Ember from 'ember';

export default Ember.View.extend({
$(function(){

	$('#slide-submenu').on('click',function() {			        
        $(this).closest('.list-group').fadeOut('slide',function(){
        	$('.mini-submenu').fadeIn();	
        });
        
      });

	$('.mini-submenu').on('click',function(){		
        $(this).next('.list-group').toggle('slide');
        $('.mini-submenu').hide();
	})
})
  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
		<div class="col-sm-4 col-md-3 sidebar">
    <div class="mini-submenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>
    <div class="list-group">
        <span href="#" class="list-group-item active">
            Submenu
            <span class="pull-right" id="slide-submenu">
                <i class="fa fa-times"></i>
            </span>
        </span>
        <a href="#" class="list-group-item">
            <i class="fa fa-comment-o"></i> Lorem ipsum
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-search"></i> Lorem ipsum
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-user"></i> Lorem ipsum
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-envelope"></i> Lorem ipsum
        </a>
    </div>        
</div>

Answer 1

在 View 中实现 JS 时，您想将代码放在 didInsertElement 钩子(Hook)中:

import Ember from 'ember';

export default Ember.View.extend({
    didInsertElement: function() {
        // Your code here
    }
});

有关工作示例，请参阅此 jsbin:http://emberjs.jsbin.com/qegedehovo/1/edit?html,css,js,output

jsbin 中您的代码段中没有的内容:

• 超棒的字体图标
• 从您提供的链接中提取的 CSS，用于设置迷你子菜单的样式