1

我正在尝试制作一个自定义表单向导,该向导将根据某些条件包含不同的自动表单步骤。下面链接了一个简化的流星垫示例。当响应式数据源(会话变量)发生变化时,响应式计算(模板助手)运行,由控制台输出确认。但是,模板没有更新,并且仍然具有相同数量的步骤。我需要做些什么来正确更新模板吗?谢谢! http://meteorpad.com/pad/cPWShRiTKYpBaMahn/Leaderboard

html

<body>
  {{> basicWizard}}
  {{> changeSteps}}
</body>

<template name="basicWizard">
<!--shouldn't the steps variable update when the helper runs?-->
  {{> wizard id="basic-wizard" steps=steps}}
</template>

<template name="changeSteps">
 <button id="changeStepsButton"> change number of Steps </button>
</template>

客户代码

Session.set('twoSteps', false);

information = new SimpleSchema({
  password: {
    type: String,
    label: 'password',
  },
});
confirm = new SimpleSchema({
  userName: {
    type: String,
    label: 'blah',
  },
});

Template.basicWizard.helpers({
    steps: function() {
      var ret = [];
      if (Session.get("twoSteps")) {
      ret[ret.length] = 
        {
          id: 'information',
          title: 'Information',
          schema: information,
        }
      }
      ret[ret.length] = 
        {
          id: 'confirm',
          title: 'Confirm',
          schema: confirm  ,
        }
      console.log("num steps: " + ret.length)
      return ret;
    }
  });

Template.changeSteps.events({
  "click #changeStepsButton": function (event) {
    Session.set('twoSteps', !Session.get("twoSteps")); 
  }, 
})
4

1 回答 1

1

看起来麻烦的是向导没有反应性地处理步骤。我怀疑它是 Wizard 包中的以下代码:

下面的“新 WizardConstructor”调用是我认为反应中断的地方: Template.wizard.created = function() { var id = this.data.id || 默认ID;this.wizard = wizardsById[id] = new WizardConstructor(this.data); };

在向导构造函数的某个地方,它会调用: _.each(this.steps, function(step) { self._initStep(step); });

但我认为 Meteor 不知道在“this.data”更改时重新创建模板。从技术上讲,向导不绑定到“步骤”,这就是它不起作用的原因。我怀疑向导包的创建者并不打算以这种方式使用它。

于 2015-05-03T21:27:52.707 回答