1

コンポーネントの初期化で、EmberJS のネストされたコンポーネントで問題が発生し続けています。jquery.steps ( http://www.jquery-steps.com/ ) を使用してウィザードを作成しようとしています。

ウィザード コンポーネントがあり、ウィザード ステップのビューを変更するアクションを持つことができるコンポーネントとして各ステップを使用したいと考えています。ただし、jquery.steps を初期化した後、ウィザードでビューが変更されません。アクションも検出されていないようです(jquery.stepsにもアクションというプロパティがあるためですか?)

選択したラジオ ボタンに応じて、{{temp}} の値がビューで変化することを期待しています。これは、親コンポーネントで $().steps をインスタンス化しない場合は機能しますが、jquery.steps をインスタンス化すると機能しなくなります。ここで何が起こっているのでしょうか?そして、どうすればそれを機能させることができますか?Ember.run をさまざまな方法で使用して loadSteps() を実行しようとしましたが、役に立ちませんでした。

ウィザード.js

import Ember from 'ember';

export default Ember.Component.extend({
  temp: null,

  didInsertElement: function () {
    this._super();
    this.loadSteps();
  },
  loadSteps: function () {
    this.$().steps({
      headerTag: "h3",
      bodyTag: "section",
      transitionEffect: "slideLeft",
      autoFocus: true
    });
  },

  actions: {
    addByHandSelected: function () {
      this.set('temp', true);
    },
    setupSheetSelected: function () {
      this.set('temp', false);
      //TODO: show file input
    },
    removeStep: function (step) {
      this.$().steps("remove", step);
    },
    addStep: function (step) {
      this.$().steps("add", step);
    },
  }
});

ウィザード.hbs

{{creation-method-wizard-step addByHandSelected='addByHandSelected' setupSheetSelected='setupSheetSelected'}}
{{label-size-wizard-step}}

作成方法ウィザード step.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'',
  temp: true,
  actions: {
    addByHandSelected: function () {
      this.set('temp',false);
    },
    setupSheetSelected: function () {
      this.set('temp',true);
    }
  }
});

作成方法ウィザードステップ.hbs

<h3>Creation Method</h3>
<section>
<div class="radio">
{{#radio-button  value="hand" name='creationMethod' groupValue=creationMethod changed="addByHandSelected"}}Enter By Hand{{/radio-button}}
</div>
    <div class="radio">
      {{#radio-button value="setupSheet" name='creationMethod' groupValue=creationMethod changed="setupSheetSelected"}}Use Setup
          Sheet{{/radio-button}}
    </div>
    Temp is {{temp}}
</section>
4

1 に答える 1