コンポーネントの初期化で、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>