标签: ember-components

在Ember.js中组合linkTo和动作助手

我需要在Ember.js中组合linkTo和action helpers.我的代码是:

{{#link-to 'index'}}<span {{action 'clear'}}>Clear</span>{{/link-to}}
Run Code Online (Sandbox Code Playgroud)

但我想这样做:

{{#link-to 'index' {{action 'clear'}} }}Clear{{/link-to}}
Run Code Online (Sandbox Code Playgroud)

并且:

<li>
    {{#link-to 'support'}}
        <span {{action 'myAction' 'support'}}>Support</span>
    {{/link-to}}
</li>
Run Code Online (Sandbox Code Playgroud)

至:

<li>
    {{#link-to 'support' {{action 'myAction' 'support'}} }}Support{{/link-to}}
</li>
Run Code Online (Sandbox Code Playgroud)

我怎样才能做到这一点?

检查我对Ember 2.0兼容的答案,确定SEO解决方案.

javascript handlebars.js ember.js ember-components htmlbars

30
推荐指数
5
解决办法
3万
查看次数

如何在ember集成测试中对组件进行聚焦/模糊?

如何在测试Ember.js组件时触发焦点和模糊事件?

this.$().focus();this.$('input').focus();似乎工作但在phantomjs和chrome中表现不同.

this.$().blur();this.$().focusout();似乎没有工作phantomjs和铬.

jquery phantomjs ember.js ember-testing ember-components

7
推荐指数
1
解决办法
944
查看次数

在Ember.js中放置CSS文件的位置?

我们的应用程序中有一些自定义样式定义.目前所有开发人员都在为其添加样式app.css.但我们不想把它变成一个巨大的文件.而且我们也不想弄乱风格类.

我们如何将自定义样式放在我们的应用程序上?有最好的做法吗?(欢迎所有指南/文件参考.)

第二个问题:是否有地方可以放置特定路线或组件的样式?

更新:更具体地说,我想将以下样式仅应用于特定路由或组件:

body {
  font-size: 13px;
}
table {
  table-layout: fixed;
}
Run Code Online (Sandbox Code Playgroud)

css ember.js ember-components

6
推荐指数
2
解决办法
5439
查看次数

如何动态渲染Ember组件

{{component-name}}在模板中使用时,渲染组件效果很好.我想使用动态参数从路径渲染组件.我试过这个

App.ApplicationRoute = Ember.Route.extend({
  init: function(){
      this.render("components/comp-two", {
        into: "application",
        outlet: "test"
      });

  }
});
Run Code Online (Sandbox Code Playgroud)

它成功呈现模板,但组件的事件(init,didInsertElement)和操作不起作用.

如何使事件和行动发挥作用?

例如:http://emberjs.jsbin.com/badaku/1/

javascript ember.js ember-components

5
推荐指数
1
解决办法
1607
查看次数

Ember ember-views.render-double-modify弃用

我试图消除我最近在我的代码中引入的弃用,我需要一些帮助.

弃用是:

您在单个渲染中修改了两次... 这在Ember 1.x中是不可靠的,将在Ember 2.0中删除[弃用ID:ember-views.render-double-modify]

我要做的是显示一个分数列表,然后显示总分.我需要降低最低分,而不是将其包含在计算总数中.我有这个工作.当我尝试通过classNameBindings将CSS类添加到已排除的分数时,就会弃用.

我很确定当我在computedTotal的计算属性中执行Ember.set时会发生这种情况.

我的问题是,当我在表单中更改分数时,如何更新CSS的总分更新?

代码细节:我有两个组件; 得分排判断排.分数行包含一系列分数对象,循环通过每个分数调用法官分数组件.

Ember      : 2.2.0
Ember Data : 2.2.1
Run Code Online (Sandbox Code Playgroud)

更新这里有一个工作的Ember Twiddle演示了这个问题:

https://ember-twiddle.com/6696d907b604aa750201?numColumns=1

index.js - (针对此问题提取的模拟代码)

let scores = new Ember A();
scores.pushObject(Ember.Object.create({ points: 1 }));
scores.pushObject(Ember.Object.create({ points: 2 }));
scores.pushObject(Ember.Object.create({ points: 3 }));
Run Code Online (Sandbox Code Playgroud)

index.hbs

{{score-row scores=scores}}
Run Code Online (Sandbox Code Playgroud)

记分row.hbs

{{#each scores as |score|}}
    {{judge-score score=score}}
{{/each}}

{{calculatedTotal}}
Run Code Online (Sandbox Code Playgroud)

记分row.js:

calculatedTotal: Ember.computed('scores.@each.points', () => {
    let totalScore = 0,
        scores = this.get('scores');

    if(Ember.isPresent(scores)) {
        var i,
            scoresLength = scores.length,
            sortedAscending,
            numLowToDrop …
Run Code Online (Sandbox Code Playgroud)

ember.js ember-components

5
推荐指数
1
解决办法
855
查看次数

emberjs-2.0在点击时动态添加更多组件

我有一个名为display-me的组件.我可以将相同组件的多个添加到同名模板中,如jsfiddle中所示,通过向该组件添加多个调用,如下所示:

  <script type="text/x-handlebars" data-template-name="index">
     {{display-me  action='add'}}
     {{display-me  action='add'}}
  </script>
Run Code Online (Sandbox Code Playgroud)

但是,我想要的是,我可以单击按钮添加组件的第二个条目,而不是像上面那样手动添加它,因为我想使用单击并添加所需数量.

我已将此操作添加到我的索引路由但它不起作用:

 App.IndexRoute = Ember.Route.extend({
    actions: {
      add: function(){   

        var comp = App.__container__.lookup("component:display-me");

        //var comp = App.DisplayMeComponent.create();

        //comp.appendTo(".test");
        //comp.appendTo('#input'); 

        Ember.$(".test").append($('<div> {{display-me  action="add"}} </div>'));

      }
    }
  });
Run Code Online (Sandbox Code Playgroud)

这是完整的jsfiddle

ember.js ember-components

4
推荐指数
1
解决办法
1672
查看次数

如何在另一个控制器ember中绑定Application controller属性

我在ApplicationController中有搜索属性,并且它与搜索的输入字段链接.我想在ProjectController中访问ApplicationController的搜索字段.它应该是同步的.我使用以下代码,但它不起作用.

/ app/controllers/projects/index.js(项目控制器)

import Ember from 'ember';
export default Ember.Controller.extend({
    needs: ['application'],
    searchBinding: 'controllers.application.search'
});
Run Code Online (Sandbox Code Playgroud)

/ app/controllers/application.js(应用程序控制器)

  import Ember from 'ember';
    export default Ember.Controller.extend({
      search: ''
    )}
Run Code Online (Sandbox Code Playgroud)

application.hbs

{{input value = search}}

ember.js ember-data ember-controllers ember-cli ember-components

4
推荐指数
2
解决办法
3730
查看次数

ember-2.0角支架组件不与ember-cli@0.2.7一起使用

为了使ember-2.0角度支架组件能够与最新的ember-cli一起使用,我还需要什么

我使用ember-cli 0.27,nodejs 0.12.4和emberjs-canary分支来测试emberjs-2.0.

我创建了一个简单的新骨架应用程序:

  ember new test-app
Run Code Online (Sandbox Code Playgroud)

并创建了一个组件:

    ember g component my-test
Run Code Online (Sandbox Code Playgroud)

在application.hbs中,如果我添加以下行来调用组件,则不会显示组件中的内容.

    <my-test  />
Run Code Online (Sandbox Code Playgroud)

如果将上面的行更改为下面的行,则会显示该组件的内容.

{{my-test}}
Run Code Online (Sandbox Code Playgroud)

这是我的bower.json的摘录

    {
      "name": "em",
      "dependencies": {
         "ember": "components/ember#canary",
         "ember-data": "components/ember-data#canary",,
         "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
         "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
         "ember-data": "1.0.0-beta.18",
         "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
         "ember-qunit": "0.3.3",
          "ember-qunit-notifications": "0.0.7",
          "ember-resolver": "~0.1.15",
          "jquery": "^1.11.1",
         "loader.js": "ember-cli/loader.js#3.2.0",
         "qunit": "~1.17.1"
   },
   "resolutions": {
       "ember": "canary",
       "ember-data": "canary"
     }
   }
Run Code Online (Sandbox Code Playgroud)

这是我的包,json

  "devDependencies": {
     "broccoli-asset-rev": "^2.0.2",
     "ember-cli": "0.2.7",
     "ember-cli-app-version": "0.3.3",
     "ember-cli-babel": "^5.0.0",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.0",
     "ember-cli-htmlbars": "0.7.6",
     "ember-cli-ic-ajax": "0.1.1",
     "ember-cli-inject-live-reload": …
Run Code Online (Sandbox Code Playgroud)

ember.js ember-cli ember-components htmlbars

3
推荐指数
1
解决办法
810
查看次数

Ember.JS在组件中创建记录并添加到本地数据存储区或最佳实践解决方案

当前情况: 我试图找到一种方法,从组件的"didInsertElement"方法中创建特定模型的记录,并将所述数据添加到数据存储.

当前情况的原因:我将事件侦听器附加到组件HBS文件中的按钮.其中一个按钮将触发两个级联但轻微的ajax调用.这些ajax调用中的最后一个响应将决定我是否应该创建记录.

我遇到的问题:当我尝试从组件中访问这样的商店时:

var myStore = this.store
Run Code Online (Sandbox Code Playgroud)

我得到一个未定义的对象.对于那些问你,我已经在我的组件中添加了以下行:

store: Ember.inject.service()
Run Code Online (Sandbox Code Playgroud)

我已经安装了Ember-Data.

解决方案:我从大量研究中发现,与商店的互动最好通过主要途径完成.但是,如何将路径中的事件侦听器附加到组件的jquery小部件?

是否有任何解决方案不需要我将所有事件监听器代码从组件移动到路由,从而撤消ember应该提供的模块化?

ajax jquery ember.js ember-data ember-components

3
推荐指数
1
解决办法
900
查看次数

Ember 2 - 过渡到通过组件进行路由

我正在尝试为 ember 2 应用程序制作一个分页组件。由于它是一个通用分页组件,我想在许多不同的路线上使用它。因此,我需要以某种方式(在我看来)提供我的路线名称,以便分页链接正常工作。

我可以轻松地将我的路线名称(字符串)传递给组件: {{pagination-component myRoute='myCurrentRouteName'}}。以及组件内部:{{link-to myRoute (query-params page=1)}}

它非常适合转到以下页面:<< First, < Previous, Next > , Last >>。

但我还想要一个选择框,其中的选项指向所有页面,如果用户选择一个页面,我可以使用类似于以下的 queryParams 转换到该路由:myRoute?page=selectedPage。ember 的所有教程都说在组件内进行转换是禁忌。

但是,鉴于我希望分页是通用的,并且我不想在处理分页并提供相同精确转换的每个路由中执行操作,我该怎么做呢?

到目前为止,我发现我可以将“-routing”注入到组件中,这可以用于组件内的转换,但由于某种原因它也不能安静地工作。另外,人们说它是私人的且不可靠。我还尝试使用操作制作 Route Mixin,这样我就可以简单地sendAction使用 组件selectedPage,但我不知道如何在我的 Mixin 中获取路由器(以便调用router.transitionTo)。

ember.js ember-router ember-components

3
推荐指数
1
解决办法
1990
查看次数