Question

我在EmberJS中使用组件初始化时遇到嵌套组件的问题。我正在尝试使用jquery.steps（http://www.jquery-steps.com/）来创建向导。

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

我希望{{temp}}的值在视图中更改，具体取决于所选的单选按钮。如果我没有在父组件中实例化$（）。步骤，但是如果我实例化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}}

创建-方法-向导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);
    }
  }
});

创建-方法-向导step.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");
    }
  }
});

Emberjs在初始化

1 个答案: