javascript - Ember.js 隐藏带按钮的分隔线，但保留 didInsertElement 功能

Question

我正尝试在 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}}

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

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

此类工作(如果 myObject.isConditionTrue 为 false，按钮将被文本替换，并在 isCondionTrue 为 时出现>true) 但是当显示按钮时，它们在点击时没有任何功能。我猜是因为调用 didInsertElement 时它们不在 DOM 中。那么，有什么办法可以解决这个问题吗？我应该进行子/父 View 设置吗？任何指针表示赞赏。

Answer 1

嗯，我绝对不是那种能说出什么是正确方法的人，因为我也在学习 ember，但这是我在 fiddle 上的工作方法

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

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