标签: ember-controllers

当actions在EmberJS控制器中包含时,如何从另一个动作调用一个动作？

使用现已弃用的方法定义操作的原始代码:

//app.js
App.IndexController = Ember.ArrayController.extend({
    // properties
    /* ... */

    // actions
    actionFoo: function() {
        /* ... */
        this.actionBar();
    },
    actionBar: function() {
        /* ... */
    }
});

//app.html
<div class="foo" {{action actionFoo this}}>
<div class="bar" {{action actionBar this}}>

但是,使用EmberJS 1.0.0,我们会收到弃用警告,说必须将操作放在控制器内的操作对象中,而不是直接放在控制器中,如上所述.

根据建议更新代码:

//app.js
App.IndexController = Ember.ArrayController.extend({
    // properties
    /* ... */

    // actions
    actions: {
        actionFoo: function() {
            /* ... */
            this.actionBar(); //this.actionBar is undefined
            // this.actions.actionBar(); //this.actions is undefined
        },
        actionBar: function() {
            /* ... */ …

我正在使用Ember的Ne​​ed Api来调用另一个控制器中的控制器方法.我能够获得控制器的实例,但是当我调用它时,它会返回给我这个错误 TypeError: Object [object Object] has no method.

这就是我所说的:

Cards.CardsIndexController = Ember.Controller.extend({
    needs: 'account_info',
     actions: {
        accountInfoStart:function(){
               console.log(this.get('controllers.account_info').test()); // error here


        }
    }
});

这是我想要调用其功能的控制器

Cards.AccountInfoController = Ember.Controller.extend({


    actions:{

        test: function(){

            alert(1);
        }

    }

});

我该如何解决？

这些是我的文件:

楷模

应用程序/模型/ basket.js:

export default DS.Model.extend({
  name: DS.attr('string'),
  house: DS.belongsTo('house', { async: true }),
  boxes: DS.hasMany('box', { async: true })
});

应用程序/模型/ box.js:

export default DS.Model.extend({
  qty: DS.attr('number'),
  basket: DS.belongsTo('basket'),
  cartLines: DS.hasMany('cart-line', { async: true })
});

应用程序/模型/车,line.js:

export default DS.Model.extend({
  qty: DS.attr('number'),
  box: DS.belongsTo('box'),
  product: DS.belongsTo('product')
});

应用程序/模型/ product.js:

export default DS.Model.extend({
  name: DS.attr('string'),
  price: DS.attr('number')
});

路线

应用程序/路由/ basket.js:

export default Ember.Route.extend({
  model(params) {
    return Ember.RSVP.hash({
      basket: this.store.findRecord('basket', params.basket_id),
      boxes: this.store.findAll('box'),
      products: this.store.findAll('product')
    });
  },
  setupController(controller, models) …

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

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

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

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

  import Ember from 'ember';
    export default Ember.Controller.extend({
      search: ''
    )}

application.hbs

{{input value = search}}

我知道这个问题可能看起来有点重复，但是这个问题的其他版本已经过时，并且其中的某些内容（例如Views）甚至不再是余烬的一部分。

作为EmberJS的前端开发人员，我的实习期大约有4周。我仍然不知道何时最好在控制器上使用路由，反之亦然。在我看来，路由中的每个动作也可以在控制器中使用。

我最近听到的一件事是，余烬路由应该是无状态的，而控制器应该是有状态的。

控制器和路由的当前状态是什么。什么时候应该使用另一个？

根据Ember docs,我正在使用EmberJS最新的1.7.0开发SPA,该路由包含一个属性,该属性包含对控制器的引用,但它总是在我的所有路由中返回undefined.

ApplicationRoute = Ember.Route.extend({
  queryParams: {
      tsk: {
          // Opt into full transition
          refreshModel: true
      }
  },
  model: function(params) {
      var task = {"name" : "task"};

      this.controller.set('currentTask',task);
      return task;
  }
});

还有另一条路线

SubfileRoute = Ember.Route.extend({
  model : function(params) {

      console.log(this.controllerName);
      console.log(this.controller);

  }
});

这两个console.log(this.controllerName);和console.log(this.controller);是不确定的,

如何正确使用ember控制器？似乎工作的唯一方法是通过this.controllerFor()

更新:

我也尝试过使用这种方法:

needs:'application',
currentTask : Ember.computed.alias('controllers.application.currentTask'),

而且currentTask总是未定义的,所以作为控制器它自己.

嗨我有一个带把手的余烬应用程序if else语句总是显示if部分而不是其他

我已经阅读了这里和这里的余烬文档中的所有内容, 并在网上无数次搜索:(

我的控制器和模板的代码显示在下面我认为问题可能与我的控制器引用未在控制器之前加载的会话初始化程序有关？

我已经阅读了这里和这里 以及我忘记的许多其他地方:(试图学习如何在我的控制器之前加载初始化器

下面是我的应用程序控制器和我的应用程序模板的代码

 <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            {{#link-to "index" class="navbar-brand"}}Hide The Word{{/link-to}}
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              {{#if 'registered'}}
                <li>{{#link-to "user" userId}}{{user}}{{/link-to}}</li>
                <li>{{#link-to …

我想通过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 …