标签: ember-cli

根据Ember 2.0的准备建议 ......

•通常,用组件替换视图+控制器
•仅在路由级别使用控制器...

......我们应该避开Controller和View支持Components.我无法弄清楚和/或理解如何生成不是components文件夹的直接父代的组件,即components/component-name.js.

我当前的控制器文件夹看起来像:

/controllers
    /account
        index.js
        edit.js
    /business
        index.js

基本上,有一些子文件夹可以根据应用程序的各个部分对逻辑进行分组.我怎样做到这一点只是组件？

看到组件中必须有" - ",我试过,但是出错...

ember generate component account/index-module.js
You specified "account/index-module.js", but due to a bug in Handlebars (< 2.0) slashes within components/helpers are not allowed.

是否所有组件都必须如此

components
    account-index.js
    account-new.js
    business-index.js

即所有在同一个文件夹？这将开始失控,增加了我实际认为是组件(像video-viewer.js,text-editor.js,radio-button.js这样的东西).

我真的想在子文件夹中包含组件,但不确定如何执行此操作.

components
    /media
        /audio
            audio-player.js
        /video
            video-player.js
    /text-editing
        text-editor.js
        editor-toolbar.js

我的组件文件夹已经很糟糕,我刚刚开始:

是否可以将帐户/业务逻辑保留在控制器中(看到它确实说您应该只在路由级别使用控制器)？

我真的很困惑这个"所有组件,所有时间"的惯例.

有没有人有一个使用Ember-CLI使用LoDash构建的(简单)ember-app项目的工作示例？(例如:我想在我的路由和控制器中使用lodash,_.someLodashFunc).

我没有在网上看到任何关于如何做到这一点的明确,逐步解释的线索/文章.

如果可能的话,使用lodash v3.0.0(我使用的是最新的ember-cli,v0.1.9).

谢谢,拉卡

我发现了如何,你需要生成一个自定义的lodash("lodash modern").使用lodash-cli:https://lodash.com/custom-builds

在命令控制台上输入:lodash modern ...,然后你会得到一个生成的javascript文件:lodash.custom.js

将该文件放在ember-cli项目的"vendor"目录下.

修改Brocfile,添加:

app.import('vendor/lodash.custom.js', {
  'lodash': [
    'default'
  ]
});

就是这样......你不必在你的任何js文件中执行"import _ from'loodash'".事实上,不要这样做(你会得到一个错误)._ var很容易获得.

例如,我有一个这样的Route对象:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    console.log('hohoho: ' + _.chunk(['a', 'b', 'c', 'd'], 2));
    return Ember.Object.create({name: 'Raka'});
  }
});

我可以看到hohoho:,b,c,当我访问那条路线时,我在javascript控制台中打印出来.

更正

你真的不需要那个lodash-cli.

我试过这种方式(我想更合适):

1. 凉亭安装lodash --save
2. 在Brocfile.js中,有这一行:app.import('bower_components/lodash/lodash.js');

而已._在路由器/控制器中自动可用.

我对d3做了同样的事情:

1. 凉亭安装d3 - 保存
2. 在Brocfile.js中,有这一行:app.import('bower_components/d3/d3.js');

名为'd3'的变量可自动使用.

新增相关链接:

1. 在ember-cli中导入自定义库
2. http://tiku.io/questions/2866484/how-to-include-a-local-javascript-im-ember-cli-application(引用:如果你不需要在vendor.js文件中缩小它们,你可以将它们放在public/js中,然后将其作为普通脚本文件包含在app/index.html中.我将此方法用于某些库,如moment.js.公共文件夹在构建期间直接复制到您的站点根目录. )
3. 在Ember CLI中访问D3等第三方库的正确方法？

我已经读过现在支持在/ components中包含目录/文件夹.使用ember-cli我可以生成所需的必要子目录/组件.但是,我似乎无法引用该组件.

例如,如果我是这样的文件夹结构:

app/components/sub/test-comp.js
app/templates/components/sub/test-comp.hbs

引用方式:(在另一个.hbs文件中)

{{test-comp model=model}}

给我以下错误:

A helper named 'test-comp' could not be found

余烬:1.10.0
ember-cli:0.2.0

我正在开发一个ember-cli项目,我正在开发一个系统,允许我解析尚未加载的模板,并且可能存在于项目结构之外.

我想在我的dist/assets目录中调用一个文件夹templates,在该文件夹中将是所有预编译的模板app/templates/external.这是我目前Brocfile.js用西兰花炖的尝试

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var stew = require("broccoli-stew");

var app = new EmberApp({
  vendorFiles: {
    "jquery.js": null
  },
  sassOptions: {
      includePaths: [
        'bower_components/bourbon/app/assets/stylesheets/',
        'bower_components/neat/app/assets/stylesheets/',
        'bower_components/bitters/app/assets/stylesheets/'
      ]
    }
});

var additionalTrees = [];

var templateFiles = stew.find(appTree, "assets/app/templates/external");
templateFiles = stew.mv(templateFiles, "assets/app/templates/external", "assets/templates");
additionalTrees.push(templateFiles);

module.exports = app.toTree(additionalTrees);

我有一个ember-cli 0.2.7使用Ember.js 1.12.0应用程序与一段代码看起来像:

controllers/cart.js

import Ember from 'ember';

export default Ember.Controller.extend({

    footwearInCart: Ember.computed('model.@each.category', function() {
        return this.get('model').any(product => product.get('category').includes('Footwear'));
    })
});

它遍历模型中的所有对象,如果其类别属性中包含"鞋类",则返回true.

我试图像这样测试它:

tests/unit/controllers/cart-test.js

import { moduleFor, test } from 'ember-qunit';
import Ember from 'ember';

var products = [Ember.Object.create({name: 'shoe', category: 'Footwear', subTotal: 10}), Ember.Object.create({name: 'shirt', subTotal: 20})];

var model = Ember.ArrayProxy.create({
  content: Ember.A(products)
});

moduleFor('controller:cart', {
  beforeEach() {
    this.controller = this.subject();
  }
});

test('footwearInCart property works', function(assert) {
  this.controller.set('model', model);

  assert.equal(this.controller.get('footwearInCart'), true, 'The footwearInCart function …

我试图在ember-cli应用程序中测试模型关系,但它一直告诉我:没有找到'rateType'的模型.它似乎无法找到我的模型.

档

~app/models/account.js
~app/models/rate-type.js

帐户模型

export default DS.Model.extend({
    ...
    rateType: DS.belongsTo('rateType'),
});

测试

import Ember from 'ember';
import { test, moduleForModel } from 'ember-qunit';
import Account from 'app/models/account';
import RateType from 'app/models/rate-type';

moduleForModel('account', 'Account Model', {
  // Specify the other units that are required for this test.
  needs: ['model:rate-type']
});

test('rateType relationship', function() {
    expect(0);
    this.subject(); //error here
//    var relationships = Ember.get(Account, 'relationships');
//    deepEqual(relationships.get('rate-type'), [
//        { name: 'rateType', kind: 'belongsTo' }
//    ]);
});

我试过驼峰套管的需要属性但是根本不喜欢它. …

是否可以在emberjs中过滤多个值？

我试图用不同的过滤变量过滤表中的项目,并且我在使用多个变量时遇到了麻烦.

任何人都可以帮忙吗？我很喜欢emberjs并渴望学习.提前致谢.

运行我的应用程序时出现以下错误:

Uncaught Error: Cannot call `compile` without the template compiler loaded. Please load `ember-template-compiler.js` prior to calling `compile`.

它与这段代码有关:

var CarouselView = Ember.View.extend({
    template: Ember.Handlebars.compile('{{view view.itemsView}}'),
    elementId: 'carousel',
    contentBinding: 'content',
    ...

在ember.js github上已经存在与此问题相关的问题:https://github.com/emberjs/ember.js/issues/10265

但是我添加ember-template-compiler到我的package.json并再次得到相同的错误.

我做了: npm install --save-dev ember-template-compiler

这是我的package.json devDependencies:

 "ember-cli": "0.1.10",
 "ember-cli-app-version": "0.3.0",
 "ember-cli-content-security-policy": "0.3.0",
 "ember-cli-dependency-checker": "0.0.7",
 "ember-cli-htmlbars": "^0.6.0",
 "ember-cli-ic-ajax": "0.1.1",
 "ember-cli-inject-live-reload": "^1.3.0",
 "ember-cli-qunit": "0.3.0",
 "ember-cli-simple-auth": "^0.7.2",
 "ember-cli-simple-auth-cookie-store": "^0.7.2",
 "ember-cli-simple-auth-oauth2": "^0.7.2",
 "ember-cli-uglify": "1.0.1",
 "ember-data": "1.0.0-beta.12",
 "ember-export-application-global": "^1.0.0",
 "ember-template-compiler": "^1.8.0",
 "express": "^4.8.5",
 "glob": "^4.0.5" …

做ember -v只显示ember cli版本.

如何查看ember.js版本和ember数据版本？

我的西兰花构建需要花费很多时间.每次更改一行js时,构建约30秒(我的意思是使用dev服务器运行的增量重构,而不是完整的构建).

这是我的情况.我有一个项目A,它是项目B的一个ember插件npm link.我正在开发项目A,我ember server在项目B上运行.

每个单独的时间我对项目A中的一行javascript进行更改并重建,我看到项目B中的以下文件发生了变化:

B/dist/assets/vendor.css
B/dist/assets/vendor.js
B/dist/assets/vendor.map
B/dist/assets/B.css
B/dist/assets/B.css.map

我担心的是,因为我正在开发一个链接包,我的西兰花配置是这样的,整个node_modules被重新组合到那些供应商文件中.

有没有办法让我配置ember/broccoli使用单独的文件来编译A并将其与其余部分隔离vendor.js？B/dist/assets/A.min.css并B/dist/assets/A.min.js为例子吗？

...或者我猜错了问题的原因？

非常感谢你的帮助!

编辑:这是一些额外的信息请求

Slowest Nodes (totalTime => 5% )              | Total (avg)         
----------------------------------------------+---------------------
Concat (11)                                   | 39239ms (3567 ms)   
RecastFilter (280)                            | 33127ms (118 ms)    
Babel (233)                                   | 14099ms (60 ms)     
EslintValidationFilter (5)                    | 12632ms (2526 ms)   
LessCompiler (46)                             | 7191ms (156 ms)  

Slowest Nodes (totalTime => 5% )              | Total (avg)         
----------------------------------------------+---------------------
SourceMapConcat: Concat: Vendor …