初始化时的 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}}

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

发生这种情况是因为 dom 从 jquery 步骤发生了变化。结果它打破了双向绑定。一种解决方案可能是将操作发送到未被 jquery 步骤初始化修改的父组件，并处理数据的双向绑定。否则您将不得不手动更新 dom。也是一个类似的问题，与使用修改了 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 嵌套组件 jquery

Emberjs nested components jquery on initialization

jquery

ember.js

jquery-steps