Ember.js隐藏带有按钮的分隔符,但保留didInsertElement功能

Ember.js hiding a divider with buttons, but maintaining didInsertElement functionality

本文关键字:保留 didInsertElement 功能 分隔符 隐藏 js 按钮 Ember      更新时间:2023-09-26

我正在尝试显示和隐藏Ember.js中的一些按钮,如下所示。

{{#view App.myView contentBinding="App.myObject"}
<div id="my_widget" class="well span3">                                                                                 
{{#if content.isConditionTrue}}                                         
  <button id="stop_button" class="btn btn-primary"> Stop </button>                                              
  <button id="start_button" class="btn btn-primary" > Start </button>
  <button id="record_button" class="btn btn-primary">Record </button>
</div>                                            
{{else}}                                            
  <div id="widget_warning_box" class="well">                                                  
    <p> No cameras are open, open a camera in Add/Remove Cameras tab. </p>                                          
  </div>
{{/if}}                                         
</div>
{{/view}}

视图如下所示:

App.myView = Ember.View.Extend({
   didInsertElement: function() {
      $record = $("#record_button")
      $start = $("#start_button")
      $stop = $("#stop_button")
      $record.click(function(){
           console.log("record clicked")
           });
      $start.click(function(){
           console.log("start clicked")
           });
   });

而 myObject 控制器是

  App.myObject = Ember.Object.create({
      isConditionTrue : false;
  });

这种工作(如果false按钮myObject.isConditionTrue则由文本替换,并在true isCondionTrue时出现),但是当按钮显示时,它们在单击时没有任何功能。我猜这是因为当调用didInsertElement时它们不在DOM中。那么,有没有办法解决这个问题?我应该进行子视图/家长视图设置吗?任何指示赞赏。

好吧,我绝对不是那个可以说出什么是正确方法的人,因为我也只是在学习余烬,但这是我在小提琴上的工作方法

http://jsfiddle.net/drulia/zkPQt/

基本上每次你myObject.isConditionTrue切换到false时,余烬都会从 DOM 中删除你的按钮,这就是你的 jQuery 选择器停止工作的原因。我附加了 ember js {{action}} 助手并放置了响应 myObject 中事件的函数,现在按钮正在工作并在屏幕上显示操作结果。