Question

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

补充工具栏我想在我的应用中使用：http://bootsnipp.com/snippets/featured/nav-sidebar-with-toggle-button

有人可以告诉我如何修复jQuery部分吗？（侧边栏处于活动状态，但访问网站时必须处于非活动状态。在用户点击选项按钮时，站点栏必须弹出。）

＆＃13;

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();
	})
})
  });

＆＃13;

<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>

＆＃13;

Answer 1

在视图中实现JS时，您希望将代码放在didInsertElement钩子中：

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

Ember cli切换边栏＆＃34;实现Jquery部分？＆＃34;

1 个答案: