正确使用EmberJS + RequireJS和Mixins的方法?

时间:2014-01-24 15:38:38

标签: javascript jquery facebook ember.js requirejs

现在我已经尝试开始使用EmberJS了,在Github上通过这个项目使用RequireJS作为依赖加载器:https://github.com/fernandogmar/Emberjs-RequireJS

我想在Github上使用RequireJS-Facebook Mixin:https://github.com/luan/ember-facebook

我可以让它主要运行,requirejs加载ember和facebook .js文件,启动应用程序并加载按钮模板,但facebook javascript sdk似乎没有加载,我不确定为什么。在回购处有稀疏的信息,并不是真的有人回复irc,现有的例子都很陈旧。

我尝试过比较类似项目,例如:https://github.com/MemoRamirez/AngularJS-Facebook-RequireJS - 搜索Ember论坛/文档,以便我在这里尝试:

main.js

(function(root){
    require(["config"], function(config){
        requirejs.config(config);
        require(["App", "ember", "ember-facebook"], function(App, Ember){
            var app_name = config.app_name || "App";
            root[app_name] = App = Ember.Application.createWithMixins(App, Em.Facebook);
            [app_name].set('appId', '591709020896302');
            Em.FacebookView = Ember.View.extend({
              defaultTemplate: 'application'
            });
        });
    });
})(this);

config.js

define({
    app_name: "MyExampleApp", 
    shim : {
        'ember' : {
            deps: ['handlebars', 'jquery'],
            exports: 'Ember'
        }
    },
    paths : {
        'App': 'app/main',      
        'models': 'app/models',
        'views': 'app/views',
        'controllers': 'app/controllers',
        'templates': 'app/templates',
        /*libs*/
        'jquery': 'libs/jquery/1.10.2/jquery',
        'handlebars': 'libs/handlebars/1.1.2/handlebars',
        'ember': 'libs/ember/1.3.1/ember',
        'ember-facebook': 'libs/ember-facebook',
        /*requirejs-plugins*/
        'text': 'libs/requirejs-plugins/text',
        'hbs': 'libs/requirejs-plugins/hbs',
        'domReady': 'libs/requirejs-plugins/domReady',
        'order': 'libs/requirejs-plugins/order'
    },
    /*hbs plugin options*/
    hbs: {
        disableI18n: true,
        templateExtension: "html"
    }

}); 

ApplicationView.js

define([
    "ember",
    "text!templates/applicationTemplate.html"
], function(Ember, applicationTemplate) {

    var ApplicationView = Ember.View.extend({
        defaultTemplate: Ember.Handlebars.compile(applicationTemplate)
    });
    return ApplicationView;
});

ApplicationController.js

define(["ember"], function(Ember){
    var ApplicationController = Ember.Controller.extend();

    return ApplicationController;
});

applicationTemplate.html

<script type="text/x-handlebars">
{{#if MyExampleApp.FBUser}}
  <div>
    <img {{bindAttr src="MyExampleApp.FBUser.picture" alt="MyExampleApp.FBUser.name"}} />
    {{MyExampleApp.FBUser.name}}
    <a href="#" {{action "logout" target="FB"}}>Logout</a>
  </div>
{{else}}
  {{#view Em.FacebookView type="login-button" data-size="xlarge"
                          data-scope="email, offline_access"}}
    Connect
  {{/view}}
{{/if}}
</script>

Firefox中的错误控制台:

[16:42:18.010] ReferenceError: Ember is not defined @ file:///F:/Users/Richard/Desktop/Emberjs-RequireJS-master/starter-kit/scripts/libs/ember-facebook.js:4
[16:42:18.174] file:///F:/Users/Richard/Desktop/Emberjs-RequireJS-master/starter-kit/scripts/libs/ember/1.3.1/ember.js
[16:42:18.044] not well-formed @ file:///F:/Users/Richard/Desktop/Emberjs-RequireJS-master/starter-kit/scripts/app/templates/applicationTemplate.html:4
[16:42:18.147] Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. @ file:///F:/Users/Richard/Desktop/Emberjs-RequireJS-master/starter-kit/scripts/libs/jquery/1.10.2/jquery.js:5375
[16:42:18.168] TypeError: mixin is undefined @ file:///F:/Users/Richard/Desktop/Emberjs-RequireJS-master/starter-kit/scripts/libs/ember/1.3.1/ember.js:7335
[16:42:18.183] Error: assertion failed: Expected hash or Mixin instance, got [object Undefined] @ file:///F:/Users/Richard/Desktop/Emberjs-RequireJS-master/starter-kit/scripts/libs/ember/1.3.1/ember.js:836

0 个答案:

没有答案