在 ember JS 中创建侧边栏

Question

我有这个例子： http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

我想将其推送到 EMBER js 中的模板句柄栏中

我做的是

索引.HTML

<script type="text/x-handlebars">

I PUT ALL THE DIV SECTION IN THE INDEX.HTML EXAMPLE
</script>

我添加了那些 JS

  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.6.1.js"></script>
  <script src="js/app.js"></script>
  <script src="tests/classie.js"></script>
  <script src="tests/modernizr.custom.js"></script>

我运行文件，当我点击按钮时没有任何反应。但是，如果我从 HANDLEBARS 中删除 DIV 部分，它就可以工作......

谢谢 S

Answer 1

在执行初始化侧边栏的代码时，模板尚未呈现。因此选择器将找不到元素，并且 onclick 函数无法绑定到按钮。视图中有一个 模板渲染后调用的 didInsertElement 事件。将初始化侧边栏的代码包装成一个 init() 函数：

function sidebarInit(){
   var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
        menuRight = document.getElementById( 'cbp-spmenu-s2' ),
        menuTop = document.getElementById( 'cbp-spmenu-s3' ),
    ...
    if( button !== 'showRightPush' ) {
        classie.toggle( showRightPush, 'disabled' );
    }
  }

从你的角度来称呼它。

   App.ApplicationView = Ember.View.extend({
      didInsertElement : function(){
        this._super();
        sidebarInit();             
      }
    });