javascript - 为什么 didTransition 不调用我的 jquery？

Question

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

正如你所看到的，有console.log & jquery

请注意，每个 html(或 hbs，因为这是 Ember.js)文件都有一个名为 float-right-col 的类，并且重要的是，在我的应用程序中的每次转换之后，“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 来处理这种逻辑(在我看来，这种方法忽略了 Ember 为您提供的一些工具)，您可能需要考虑 Ember Run Loop。 ember 中的事件本质上位于优先级队列中，直到它们被执行。感兴趣的特定队列是 afterRender:

The afterRender contains jobs meant to be run after all previously scheduled render tasks are complete. This is often good for 3rd-party DOM manipulation libraries, that should only be run after an entire tree of DOM has been updated

大致如下:

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

当我将 JQuery 库包装在组件中时，有时需要编写这样的代码。

但 Ember 的真正强大之处在于它如何将您的逻辑从 DOM 中取出，并将真相放入 Javascript 中。我不知道你到底想做什么，但让我提出一两个建议。 Ember Controller 旨在封装您的模板状态。如果你有一些 css 依赖于某些东西是否被最小化，你应该有一个像这样的模板:

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

然后在您的 Controller 上，您有一个计算属性或只是一个常规属性:

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')

每当 isMinimized 计算结果为 true 时，都会添加 css 类 float-right-col-minimized(当 false 时使用::添加)。

您还可以{{bind-attr "class=dynamic :static"}}，其中dynamic是变量(如果它只是一个常规类而不是一个类，则仅在类名之前显示 : Controller 变量名)。这里的区别在于，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 何时可用等等。感觉更干净。如果您允许，Ember 会在适当的时间重新呈现更改。另外，如果您需要其他依赖于最小化的东西，它可以观察 isMinimized 属性。建立可能导致 DOM 更新链式 react 的关系相当容易。

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

你想要什么吗？我刚刚发现，如果我在 Ember 应用程序中没有与其他人的 DOM 交互时必须编写任何 JQuery，那么我就无法充分利用 Ember 的功能