emberjs和foundation4

问题描述

我正在尝试使用现在使用zepto框架的emberjs和foundation 4，但是一旦将emberjs添加到我的application.js中，基础代码就停止工作。这个包含的顺序有什么问题吗？

  // = require jquery 
 // = require jquery- ui 
 // = require jquery_ujs 
 // = require events 
 // = require foundation 
 // = rails rails.validations 
 // = require rails 
 // = require gmaps4rails / gmaps4rails.base 
 // = require gmaps4rails / gmaps4rails.googlemaps 
 
 // = require handlebars 
 // = require ember 
 // = require ember-data 
 // = require teammngt 
 
 // = require_self 
 TeamMngt = Ember.Application.create（）; 
 $（document）.foundation（）; 
  

解决方案

TL; DR

  TeamMngt = Ember.Application.create（{
 ready：function（）{
 Ember.run.next（this，function（） {
 $（document）.foundation（）; 
}）; 
} 
}）; 
  

或

创建后添加应用程序：

  TeamMngt.ApplicationView = Ember.View.extend（{
 didInsertElement：function（）{
 Ember.run.next（this，function（）{
 $（document）.foundation（）; 
}）
} 
}）; 
  

注意：将TeamMngt更改为您设置的任何内容 = Ember.Application.create（）;

---

一些说明：

在您的应用程序模板加载后， didInsertElement 事件被触发。但是，单独放置 $（document）.foundation（）将无法正常工作（我猜测加载/绑定或其他方式）。所以我做了：

  didInsertElement：function（）{
 setTimeout（function（）{
 $文件）.foundation（）; 
}，0）; 
} 
  

拥有一个 setTimeout（）与0ms似乎很奇怪，所以我认为有一个更好的方法。因此，导致在 Ember.run.next（）中 $（document）.foundation（） p>

---

学分： Zaxnyd

参考： strong>

i am trying to use emberjs and foundation 4 which is now using the zepto framework, though as soon as i added the emberjs includes into my application.js the foundation code stops working. is there something wrong with the order of the includes?

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require events
//= require foundation
//= require rails.validations
//= require rails
//= require gmaps4rails/gmaps4rails.base
//= require gmaps4rails/gmaps4rails.googlemaps

//= require handlebars
//= require ember
//= require ember-data
//= require teammngt

//= require_self
TeamMngt = Ember.Application.create();
$(document).foundation();

解决方案

TL;DR

TeamMngt = Ember.Application.create({
  ready: function() {
    Ember.run.next(this, function(){ 
      $(document).foundation(); 
    });
  }
});

OR

Add after you create the application:

TeamMngt.ApplicationView = Ember.View.extend({
  didInsertElement: function() {    
    Ember.run.next(this, function(){ 
      $(document).foundation(); 
    })
  }
});

Note: Change TeamMngt to whatever you set = Ember.Application.create();

---

Some Explanation:

After your application template gets loaded, didInsertElement event gets fired. But placing $(document).foundation() there alone won't work (I'm guessing the way things are loaded/bound or whatever). So I did:

didInsertElement: function() {
  setTimeout(function() {
    $(document).foundation();
  }, 0);
}

Having a setTimeout() with 0ms seemed weird, so I figured there is a better way. Thus, leading to putting $(document).foundation() inside Ember.run.next().

---

Credits: Zaxnyd
Reference: Ember.js Ember.View didRender event

这篇关于emberjs和foundation4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！