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);
    }
  }
});

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

1 回答 1

1

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

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

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

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");
    }
  }
});
于 2015-08-04T13:08:03.573 回答