标签: ember-cli

我正在将Ember.js应用程序及其Express REST API分成两个不同的项目.我认为事情会更加清洁.

在那之前,我的Express应用程序都提供REST端点和所有静态文件,如index.html和app.js.但现在,ember-cli负责提供静态文件,Express应用程序处理身份验证+ REST.

我遇到的最后一个问题是我现在有两个不同的端口:ember-cli使用http://localhost:4200和快速使用http://localhost:3333.当我在身份验证时从Express获取会话cookie时,由于相同的源策略,它永远不会在后续请求中发送(请参阅:如何使用jQuery在不同的端口上发送AJAX请求？).

现在,如果我理解正确,我有两个解决方案:

1. Setup Express支持JSONP并确保Ember也使用它
2. 安装本地Nginx或Apache并设置代理传递

第一个解决方案不行,因为部署后两个应用程序将使用相同的域/端口.第二种解决方案可能会起作用,但要求开发人员安装本地Web服务器以简单地运行应用程序似乎有点荒谬.

我相信很多人以前都遇到过这个问题.你有什么建议让开发变得容易？

谢谢!

我已经按照以下教程并成功安装了除ember-cli之外的所有内容. http://www.ember-cli.com/#getting-started

• node --help(显示输出帮助消息)
• npm --help(显示输出帮助消息)
• npm install -g bower
• npm install -g phantomjs

所有上述工作没有任何问题,但当我尝试ember new my-new-app 我得到以下

$ ember new my-new-app
-bash: ember: command not found

当我这样做时,$ npm install -g ember-cli 我得到以下内容

$ npm install -g ember-cli
/Users/MGK/.node/bin/ember -> /Users/MGK/.node/lib/node_modules/ember-cli/bin/ember
ember-cli@0.1.4 /Users/MGK/.node/lib/node_modules/ember-cli
??? abbrev@1.0.5
??? js-string-escape@1.0.0
??? debug@2.1.0 (ms@0.6.2)
??? temp@0.8.1 (rimraf@2.2.8)
??? symlink-or-copy@1.0.1 (copy-dereference@1.0.0)
??? http-proxy@1.7.3 (requires-port@0.0.0, eventemitter3@0.1.6)
??? broccoli-writer@0.1.1 (rsvp@3.0.14, quick-temp@0.1.2)
??? yam@0.0.17 (findup@0.1.5, fs-extra@0.8.1, lodash@2.4.1)
??? broccoli-caching-writer@0.5.1 (promise-map-series@0.2.0, rimraf@2.2.8, quick-         temp@0.1.2, rsvp@3.0.14, core-object@0.0.2, broccoli-kitchen-sink-helpers@0.2.5) …

首先,我制作了一个没有Ember CLI的小型Ember应用程序.

我有这段代码.

window.MyApp = Ember.Application.create({
  ready: function() {
    this.register('session:current', MyApp.SessionController, { singleton: true });
    this.inject('controller', 'session', 'session:current');
  }
});

这很有效.

然后我决定用Ember CLI从头开始重写所有内容.

我编辑了文件app/app.js并添加了ready钩子,就像我以前的版本一样.

var App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver: Resolver,
  ready: function() {
    this.register('session:current', App.SessionController, { singleton: true });
    this.inject('controller', 'session', 'session:current');
  }
});

这不起作用.

会话控制器确实存在.那是文件的内容app/controllers/session.js

export default Ember.Controller.extend({
  isLoggedIn: false,
});

我得到的错误信息是

TypeError: Attempting to register an unknown factory: `session:current`

它出现在浏览器中.

我用google搜索了这条消息,但我在Ember CLI中找不到依赖注入.

任何的想法？

我有这样的形式:

<form {{action 'resetPassword' on="submit"}}>
  {{input type="password" value=newPassword placeholder="reset password"}}<br>
  {{#if newPassword}}
    {{input type="password" value=confirmPassword placeholder="confirm password"}}
    {{#if passwordOK}}
      <button>Reset</button>
    {{/if}}
  {{/if}}
</form>

它依赖于可用的resetPassword操作以及passwordOK函数,该函数测试已输入密码并确认匹配.

这都是粉碎,但我想我需要在我的应用程序中多次使用此表单.所以我认为我应该把它变成一个组件.

如何将此表单转换为可重用的组件？

我对如何利用这一大块功能并在整个应用程序中使用它感兴趣.如何打包并重新使用？

在ember-cli文档中,它描述了通过自己覆盖app/component/[addon-name.js]来在宿主应用程序中桥接插件.但是,文档没有明确说明如何执行此操作.

通过试验和错误,我注意到通过在[主机应用程序]/app/component/[addon.js的名称]中创建一个组件文件,只需将插件复制/粘贴到那里就可以自定义插件.然而,这是一种可怕的方法,我想我可以简单地覆盖有问题的函数......并且在某些情况下调用this.super().functionName以保持过度乘坐简单和修剪.

但是,我不能让这个工作.有任何想法吗？

我有一个简单的搜索输入,可以过滤通过html表中表示的api响应.过滤效果很好,但由于某些原因,我觉得这是一个非常难看的方式.所以我想知道什么是更好的方法.

这是我的控制器:

export default Ember.ArrayController.extend({
    searchKeyword: null,

    searchResults: function(){
        var searchText = this.get('searchText');

        if( ! searchText) return;

        //YOUVE ALREADY GOT THE COMPANIES DONT GO BACK TO THE SERVICE
        var companies =  this.get('model');

        var regex = new RegExp(searchText, 'i');

        return companies.filter(function(company){
            return company.name.match(regex);
        });
    }.property('searchText', 'model')
});

这是我的路线:

export default Ember.Route.extend(AuthenticatedRouteMixin, {
    model: function(){
        var adapter = AddressBookHomeAdapter.create();
        var companies =  adapter.findAll();
        return companies;
    }
});

这是我的适配器(我没有使用Ember-Data):

export default Ember.Object.extend({
    findAll: function(){
        return ajax('http://localhost:8000/api/v1/companies')
            .then(function(response){
                return response.data;
            });
    }
});

这是非常丑陋的(在我看来)html …

Store.push(类型,数据)已被弃用.请提供JSON-API文档对象作为store.push的第一个也是唯一的参数

我刚刚更新为ember 1.13.2和ember-data 1.13.3,我现在收到了很多本帖子标题中提到的弃用消息.我不知道是什么导致它出现,Ember Inspector的Deprecations选项卡没有显示我的代码在问题所在的位置.

如果有人能够向我解释这个消息意味着什么以及我需要做些什么来解决它,我将不胜感激.

谢谢.

更新:

我的自定义应用程序适配器如下所示

// app/adapters/application.js
import ActiveModelAdapter from 'active-model-adapter';

export default ActiveModelAdapter.extend({
    host: 'http://dev.mydomain.com',
    namespace: 'api/v1',
});

它使用ActiveModelAdapter附加组件作为不同的弃用消息,说明ActiveModelAdapter将不再与v2.0.0中的ember-data捆绑在一起.但是,我已经尝试使用ember-data适配器和add on我的代码,并获得有关Store.push的相同弃用消息.

有一些堆栈跟踪,因为有相同弃用的多个版本,但这里有一对:

DEPRECATION: store.push(type, data) has been deprecated. Please provide a JSON-API document object as the first and only argument to store.push.
    at ember$data$lib$system$store$$Service.extend.push (http://localhost:4200/assets/vendor.js:81014:17)
    at http://localhost:4200/assets/vendor.js:83253:17
    at Array.forEach (native)
    at Ember.Mixin.create._extractEmbeddedHasMany (http://localhost:4200/assets/vendor.js:83251:68)
    at null.<anonymous> (http://localhost:4200/assets/vendor.js:83219:22)
    at http://localhost:4200/assets/vendor.js:84254:20
    at cb (http://localhost:4200/assets/vendor.js:27380:11)
    at OrderedSet.forEach (http://localhost:4200/assets/vendor.js:27163:11)
    at Map.forEach (http://localhost:4200/assets/vendor.js:27384:18)

DEPRECATION: store.push(type, data) has been deprecated. Please provide a …

我看到在许多Ember-cli项目中,jQuery被调用Ember.$()而不是$().

有具体原因吗？

您好,谢谢您点击我的问题.

我刚刚将我的应用程序升级到最新的ember-cli版本(2.3.0-beta.1),现在我的一个(或多个)模板与构建混乱.接下来会发生什么似乎是一个微不足道的问题,但我从来没有完全了解它,所以我终于要问了.

正如标题所暗示的那样,我之前<script>在我的模板中有一些标记用于较小的事情,例如一个小的jQuery条件append()或任何可用的2或3行代码.我从来没有考虑过创造视图的足够动力,但在此期间却没有认真对待.

因此,鉴于以下代码段,保持其功能完整性的推荐方法是什么？请不要介意这个特定代码片段背后的逻辑和动机,这只是一个例子:

<div class="container">
  <div class="row">
    <div class="col s12 valign-wrapper">
      <img class="materialboxed radius left" width="100" src="/default_avatar.jpg" alt="" />
      <h3>Welcome, Sarah Connor!</h3>
    </div>
  </div>
  <div class="row">
    <div class="col s12">
      {{outlet}}
    </div>
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function(){
     $('.materialboxed').materialbox();
  });
</script>

任何不会打破现有(和预期？)约定的东西都会在这一点上发生.事情是,我一直在阅读关于这个主题的内容,但没有任何明确的立场,加上一些我怀疑要避免使用惯例的快速黑客,因此我不会去做.

我很清楚,在ember-cli中,任何2.x版本的文档仍然很年轻,并且仍然有一条长路.一旦我弄清楚自己该做什么,我或许可以帮助它.

由于这是一个关于良好实践的50/50实际问题和讨论的问题,我正在考虑在discussion.emberjs上发布,如果SO不会提出任何适用的解决方案/以更清晰的方式定义背后的概念.

我想在下一个模板加载之前在Ember中渲染一个加载模板.现在我有一个应用程序路径的加载模板,如果用户直接导航到URL,它可以正常工作.但是,如果用户link-to从应用程序的另一个页面中单击一个页面,我希望显示相同的模板.如何才能做到这一点？

调度afterRender不起作用,因为页面尚未"加载"(现在它只是在下一页加载时在上一页停留几秒钟;使用afterRender导致相同的事情,但是一旦加载你得到一个加载div在淡出之前的简要概述:显然不是预期的行为).

如何显示加载模板呢？

减少加载时间不是一种选择,我们做了一些非常繁重的计算.

编辑:我确实认为我的问题与建议重复的问题不同,因为我想为所有路由提供相同的加载模板,默认加载模板结构不提供."旧版"LoadingRoute解决方案不再适用,因为最新版本的Ember不推荐使用视图.