Question

有人可以告诉我如何在Ember.View中使用becameVisible钩子吗？如果我以与didInsertElement挂钩相同的方式使用它，它似乎不会在我预期的情况下触发。

案例是我有多个标签，其中一个包含谷歌地图。一旦选中该标签，我就需要在地图上触发刷新。

关于钩子的文档可以在页面的中间找到here，在Lifecycle Hooks

我在Ember 1.3.2

Answer 1

很好地回答关于视图上becameVisible挂钩的标题。此挂钩仅在视图的isVisible属性更改时触发。默认情况下，isVisible属性在视图上设置为true。因此，如果您在视图上切换该属性，或将其设置为false，则视图将被隐藏，这将导致becameHidden挂钩在设置回true时触发，becameVisible挂钩将触发。

因此，我们在索引模板上说我们有一个链接，其中包含一个针对视图的操作和一个视图名称App.MyDiv，我们将使用它来说明该视图中的钩子变为可见/变为隐藏：

  <script type="text/x-handlebars" data-template-name="index">

     <a href="#" {{action 'hide' target="view"}}>Hide that Div</a>

     {{view App.MyDiv}}

  </script>

我们需要处理隐藏动作，因为它的目标是视图，我们将把它交给那里，然后使用viewName属性获取我设置为“hidemydiv”的视图App.MyDiv，这样我就可以通过名称获取它然后设置isVisible属性：

 App.IndexView = Ember.View.extend({
   actions: {
     hide: function() {
       console.log(this.get('hidemydiv').toggleProperty('isVisible'));
     }
   }
 });

现在在我们的App.MyDiv View定义中：我们可以这样：

 App.MyDiv = Ember.View.extend({
   viewName: 'hidemydiv',
   templateName: 'myDiv',

   didInsertElement: function() {
     console.log('My Div: didInsertElement');
   },

   becameVisible: function() {
     console.log('My Div: Became Visible');
   },

   becameHidden: function() {
     console.log('My Div: Became Hidden');
   }
 });

这是一个JSBin，用于显示在视图上切换isVisible属性时会发生什么。

http://emberjs.jsbin.com/nuniqawi/1/edit

关于你的问题，你可以在标签上有一个动作，按下它时会在地图上调用某种重新渲染动作。

在EmberJS View中成为隐形钩子

1 个答案: