Emberjs 嵌套组件 jquery 初始化

Question

我在 EmberJS 中的组件初始化中不断遇到嵌套组件的问题。我正在尝试使用 jquery.steps (http://www.jquery-steps.com/) 创建一个向导。

我有一个向导组件，我希望将每个步骤作为一个组件，它可以通过操作来更改向导步骤的视图。但是，在初始化 jquery.steps 之后，向导中的视图并没有改变。似乎也没有检测到动作（是不是因为 jquery.steps 也有一个名为动作的属性？）

我希望 {{temp}} 的值在视图中根据选中的单选按钮而改变。如果我不在父组件中实例化 $().steps，则此方法有效，但如果我实例化 jquery.steps，则停止工作。这里会发生什么？我如何让它工作？我尝试使用 Ember.run 以各种方式执行 loadSteps() 均无济于事。

wizard.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);
    },
  }
});

wizard.hbs

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

creation-method-wizard-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>

Answer 1

这是由于 jquery 步骤中 dom 发生的更改而发生的。结果，它打破了双向绑定。一种解决方案可能是将操作发送到未被 jquery 步骤初始化修改的父组件，并处理数据的双向绑定。否则你将不得不手动更新 dom。 here 也是一个类似的问题，与使用修改了 dom 结构的库刷新组件有关。

可以在以下示例中找到这些概念的粗略示例，

https://emberjs.jsbin.com/jegizusowo/1/edit?html,js,output

js

App.StepsWizardComponent = Em.Component.extend({
  temp: null,

  didInsertElement: function () {
    this._super();
   var self = this;
    Ember.run.scheduleOnce('afterRender', this, function() {
    self.loadSteps();
  });
  },
  loadSteps: function () {
    this.$(".wizard-step").steps({
      headerTag: "h3",
      bodyTag: "section",
      transitionEffect: "slideLeft",
      autoFocus: true
    });
  },

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

});

App.CreationMethodWizardStepComponent = Em.Component.extend({
  classNames:["wizard-step"],
//   tagName:'',
  temp: true,
  actions: {
    addByHandSelected: function () {
      console.log("addbyhand2");
      console.log(this.get("temp"));
      this.set('temp',false);
      this.$("#temp-val").text(this.get("temp"));
      this.get("parentView").send("addByHandSelected");
    },
    setupSheetSelected: function () {
      console.log("setupsheet2");
      console.log(this.get("temp"));
      this.set('temp',true);
      this.$("#temp-val").text(this.get("temp"));

 this.get("parentView").send("setupSheetSelected");
    }
  }
});