Ember.js 余烬';s reopen()函数是否可以在Ember CLI中编译的ES6模块上工作?

Ember.js 余烬';s reopen()函数是否可以在Ember CLI中编译的ES6模块上工作?,ember.js,ember-cli,Ember.js,Ember Cli,我正在将一个Ember.js应用程序移植到Ember cli 我的应用程序是一个增强的boardgame,其中有一个ember states StateMachine子类,用于管理涉及在两个玩家之间来回传递游戏的操作 在该子类中,我调用reopen()以定义绑定到状态机的currentState.name的方法: PassManager.reopen({ isPassing : function(){ return this.get("currentState.name") == "

我正在将一个Ember.js应用程序移植到Ember cli

我的应用程序是一个增强的boardgame,其中有一个ember states StateMachine子类,用于管理涉及在两个玩家之间来回传递游戏的操作

在该子类中,我调用reopen()以定义绑定到状态机的currentState.name的方法:

PassManager.reopen({
  isPassing : function(){
    return this.get("currentState.name") == "pass";
  }.property("currentState.name")
});
请参阅此处的上下文:

然后在模板中的if语句中调用该函数:

<h1>Player character assignments</h1>
{{#if PassManager.isPassing}}
  {{partial 'pass'}}
{{else}}
  <p>You are {{current-player-color}}.</p>
  <p><button {{action 'next'}}>Got it</button></p>
{{/if}}

在我将PassManager导入到我的应用程序的地方可以正确找到它。只是使用reopen()定义的这个函数没有被调用。

PassManager不是Ember.StateManager的子类,而是它的一个实例,因为您使用的是create而不是extend。Reopen可用于实例,但适用于实例所属的类。因此,顺序不同:实例方法覆盖类方法。因此,Ember.StateManager.create中的isPassing版本将覆盖PassManager.reopen中的版本

尝试按如下方式构造代码:

import Ember from "ember";
import Game from "./game"

var PassManagerClass = Ember.StateManager.extend({
  reset : function(){
    console.log("PassManagerClass.reset()");
    this.set('players', this.get('gamePlayers'));
    this.set('playerIdx', 0);
    this.transitionTo("pass");
  },

  next : function(){
    if(this.get('currentState.name') == "pass"){
      this.transitionTo("act");
    } else {
      if(this.get('playerIdx') == Object.keys(this.get('gamePlayers')).length - 1){
        this.transitionTo("done");
      } else {
        this.transitionTo("pass");
      }
    }
  },

  isPassing : function(){
    console.log("here");
    return true;
  }.property()
});

PassManagerClass.reopen({
  isPassing : function(){
    console.log("isPassing: " + this.get("currentState.name"));
    return this.get("currentState.name") == "pass";
  }.property("currentState.name")
});

var PassManager = PassManagerClass.create({
  initialState : 'pass',
  playerIdx : 0,
  gamePlayers: Game.players,

  pass : Ember.State.create({
    enter: function(stateManager) {
      console.log("PM entering pass");
    } 
  }),

  act : Ember.State.create({
    enter: function(stateManager) {
      console.log("PM entering act");
    },
    exit: function(stateManager) {
      PassManager.playerIdx = PassManager.playerIdx + 1;
    } 
  }),

  done : Ember.State.create({
    enter: function(stateManager) {
      console.log("PassManager done");
    } 
  }),
});

export default PassManager;
注意:这只是为了说明,并为您指出正确的方向。我还没有测试过这个

import Ember from "ember";
import Game from "./game"

var PassManagerClass = Ember.StateManager.extend({
  reset : function(){
    console.log("PassManagerClass.reset()");
    this.set('players', this.get('gamePlayers'));
    this.set('playerIdx', 0);
    this.transitionTo("pass");
  },

  next : function(){
    if(this.get('currentState.name') == "pass"){
      this.transitionTo("act");
    } else {
      if(this.get('playerIdx') == Object.keys(this.get('gamePlayers')).length - 1){
        this.transitionTo("done");
      } else {
        this.transitionTo("pass");
      }
    }
  },

  isPassing : function(){
    console.log("here");
    return true;
  }.property()
});

PassManagerClass.reopen({
  isPassing : function(){
    console.log("isPassing: " + this.get("currentState.name"));
    return this.get("currentState.name") == "pass";
  }.property("currentState.name")
});

var PassManager = PassManagerClass.create({
  initialState : 'pass',
  playerIdx : 0,
  gamePlayers: Game.players,

  pass : Ember.State.create({
    enter: function(stateManager) {
      console.log("PM entering pass");
    } 
  }),

  act : Ember.State.create({
    enter: function(stateManager) {
      console.log("PM entering act");
    },
    exit: function(stateManager) {
      PassManager.playerIdx = PassManager.playerIdx + 1;
    } 
  }),

  done : Ember.State.create({
    enter: function(stateManager) {
      console.log("PassManager done");
    } 
  }),
});

export default PassManager;