在ember JS中创建补充工具栏

Question

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

我想将其推入EMBER js

中的模板句柄栏

我做的是

的index.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部分，它可以工作......

由于 小号

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