Question

在这个问题中遇到didTransition的问题后，我遇到了这个问题。 'Calling a jquery event after the page transitions'

所以你可以看到有console.log＆amp; jquery的

请注意，每个html（或hbs，因为这是Ember.js）文件都有一个名为float-right-col＆amp;的类。重要的是，在我的应用程序的每次转换后，找到“float-right-col”类并接收课程float-right-col-minimized。

App.ApplicationRoute = Ember.Route.extend({   
      actions: {
         didTransition: function() {
           console.log('log2');
           $('.float-right-col').addClass('float-right-col-minimized').delay(200);
         },
      },   
});

＆安培;＆安培;当然，在每个html / hbs文件中都有一个包含类float-right-col

的div

<div class="float-right-col"></div>

奇怪的部分是控制台显示消息'log2'，但'float-right-col'保持不变。

我的第一个想法是，也许是didTransition

Answer 1

你绝对可以用更多的Ember方式来解决这个问题。如果你开始使用JQuery来处理这种逻辑（IMO的方法忽略了Ember为你提供的一些工具），你可能会想要考虑Ember Run Loop。 ember中的事件基本上位于优先级队列中，直到它们被执行。感兴趣的特定队列是afterRender：

afterRender包含之前要运行的作业计划的渲染任务完成。这通常对第三方有利 DOM操作库，应该只在整个之后运行 DOM树已更新

这就是：

Ember.run.scheduleOnce('afterRender', self, function(){
    $('.float-right-col').addClass('float-right-col-minimized');
});

当我在组件中包装JQuery库时，我偶尔会编写这样的代码。

但是Ember的真正力量在于如何将你的逻辑从DOM中移除并将真相置于Javascript中。我不知道你究竟要做什么，但是让我在那里提出一两个建议。 Ember控制器用于封装模板状态。如果你有一些css取决于被最小化的东西，你应该有这样的模板：

<div {{bind-attr "class=isMinimized:float-right-col-minimized"}}>
 stuff
</div>

然后在你的控制器上，你有一个计算属性或只是一个常规属性：

isMinimized: true
someFunction: function(){
   if(cond)
       this.set('isMinimized', true);
   else
       this.set('isMinimized', false);
}.observes('someChangingPropertyElseWhere')

或

isMinimized: function(){
    if(cond)
         return true;
    else
         return false;
}.property('someChangingPropertyElseWhere')

只要float-right-col-minimized计算结果为true，就会添加css类isMinimized（使用::在false时添加）。

你也可以{{bind-attr "class=dynamic :static"}}其中dynamic是变量（只显示：在类名之前，如果它只是一个常规类而不是控制器变量名）。这里的区别在于动态，而不是像前一个示例那样返回true或false，返回作为css类的字符串。例如：

dynamic: function(){
    if(cond)
        return 'float-right col float-right-col-minimized'
    else
        return 'float-right col'
}.property()

在所有这些情况下，您在其他地方的逻辑会更改您的Javascript变量，例如isMinimzed，这反过来会更新DOM。我更喜欢用isMinimized这样的变量来思考，并且每当应该最小化时设置它，而不是编写JQuery选择器，担心DOM何时可用等等。感觉更清洁。如果你愿意的话，灰烬会处理适当的时间来重新渲染变化。另外，如果您需要其他东西来依赖最小化，它可以观察isMinimized属性。它很容易建立可能导致DOM更新的连锁反应的关系。

如果您需要在每个页面上都可以使用此属性，因为在转换后每个页面上都有最小化类，请考虑使用Ember.Mixin，并使用它扩展所有控制器。这个mixin可以封装这个类的切换，并将isMinimized属性添加到扩展mixin的每个控制器。

你想要的是什么，我刚刚发现如果我在Ember应用程序中没有与别人的DOM接口时必须编写任何JQuery，我就无法充分利用Ember的力量

为什么didTransition不会调用我的jquery？

1 个答案: