标签: ember-components

我正在使用带有ember-data 2.0的Ember 2.0.

在Rails中,使用真实的模型实例来模拟表单和组件是很常见的.对于posts/new表单,您将传入a Post.new并在form.html.erb模板中使用它.

在Ember中,因为召唤new Post造成了破碎的模型而变得困难.相反,我们鼓励你使用商店,并使用它this.store.createRecord('post');.

这很好,但在构建隔离组件时却没有.例如,用户可以添加多个模型的表单,例如类别创建者.在我的脑海中,结构将如下所示:

category-form/template.hbs

<button {{action 'addCategory'}}>Add category</button>
{{#each categories as |category|}}
    {{input value=category.name}}
{{/each}}
<button {{action 'save'}}>Save</button>

然后component.js将是这样的:

category-form/component.js

import Ember from 'ember';
import Category from 'app/category/model';

export default Ember.Component.extend({
    categories: [],

    actions: {
        addCategory() {
            // THIS DOES NOT WORK
            this.get("categories").pushObject(new Category);
        },

        save() {
            this.sendAction("saveCategories", this.get("categories"));
        }
    }
});

上面的示例确实有效,但需要this.store.createRecord.但据我所知,该组件无法访问该商店.这是理智的,因为那将是一个混乱全球国家的组成部分.此外,createRecord如果用户导航离开而不保存模型,则在使用时最终会在商店中存在大量残留模型.

我希望category-form此示例中的组件与全局状态的其余部分完全隔离.

我的问题是,如何使用ember逻辑正确处理？

我有一个“容器”组件

# components/container-component.js

import Ember from 'ember';
export default Ember.Component.extend({
  displayComponent: 'simple-box'
});

模板是

# templates/container-component.hbs

<div>
  {{component displayComponent}}
</div>

现在，从“容器组件”实例中进行。如何访问计算的“ displayComponent”实例？

关于如何处理的任何想法？

当我使用get方法时，我会得到组件的字符串标识

this.get('displayComponent') 
# returns (String) 'simple-box'

我正在使用ember-route-action-helper

我有一个组件垫片看起来像这样:

{{component-name model=model 
action1=(route-action "action1") 
action2=(route-action "action2") 
action3=(route-action "action3") 
action4=(route-action "action4") 
action5=(route-action "action5") 
action6=(route-action "action6") 
action7=(route-action "action7") 
action8=(route-action "action8")
action9=(route-action "action9") 
action10=(route-action "action10")
action11=(route-action "action11")
action12=(route-action "action12") 
action13=(route-action "action13") 
action14=(route-action "action14")
}}

PS以上操作未使用实际操作名称

有很多动作需要冒泡到路线,我不在我的ember应用程序中使用控制器.

由于行动太多,这看起来有点笨拙.有没有办法用另一种格式表示相同的信息,或者将其写在我的组件.hbs文件或.js文件中的其他位置？

我想通过lat和lng从灰烬组件到另一个组件的余烬(g-map).我的车把模板:

  {{!-- Index.hbs --}}
  <div class="jumbotron-outside">
  <div class="jumbotron">
    <h1 class="display-3">See The Weather Outside :)</h1>
    <p class="lead">This is a simple forecast weather.</p>
    <hr class="my-4">
    <p>Just type everything bellow this input text to get all list of the city</p>
    {{text-autocomplete}}
    <p class="lead">
      <button class="btn btn-primary btn-default" href="#" role="button" disabled={{isDisabled}}>Search</button>
    </p>
  </div>
  {{g-map lat=lat lng=lng zoom=zoom}}
</div>

这是我的text-autocomplete组件:

// text-autocomplete/component.js
import Ember from 'ember';

let lat;
let lng;
export default Ember.Component.extend({
    didInsertElement() { //dom can be acessed …

我有一个音乐组件播放从我的网站音乐页面内的SoundCloud API检索到的收藏歌曲.

{{soundcloud-player favorite=currentFavorite sound=currentFavoriteObject position=currentFavoritePosition isPlaying=isPlaying isBuffering=isBuffering}}

问题是,一旦我播放了一首歌,我改变了网站的页面(路线),歌曲继续播放,解决它我需要随时设置 isPlaying false我改变route页面的音乐.

我看到有不同的方法来实现它,但我无法弄清楚我的情况

米尝试

来自不同的控制器

needs:'player',
desactivateIsplaying: function(){
    var controller = this.get('controllers.player');
    controller.set('isPlaying', false);
}

或者来自不同的路线

desactivateIsPlaying: function(){
    var controller = this.controllerFor('player');
    controller.set('isPlaying', false);
}

在我无法设置的两个功能中的任何一个isPlaying false,我也看到提到willTransition路线动作,我该如何使用它？有没有更好的方法呢？如果有必要,我可以制作一个旋转的余烬,以更好地再现场景