成员-呈现窗体时的引导错误

Question

我有一个问题，使用成员-引导渲染一个表单。当访问路由时，不呈现任何内容，并且在控制台中呈现消息。

​

​

就会出现。

该项目是一个启动3项目，我刚刚安装了烬-引导。为了做到这一点，我做了以下工作：

ember install ember-bootstrap
ember generate ember-bootstrap --preprocessor=sass
ember generate ember-bootstrap --bootstrap-version=3

从阅读文档看，我相信这是正确的命令序列？

然后，我创建了一个新的路由，并在模板中放置了以下内容：

{{#bs-form formLayout=formLayout model=this onSubmit=(action "submit") as |form|}}
            {{form.element controlType="email" label="Email" placeholder="Email" property="email" required=true}}
            {{form.element controlType="password" label="Password" placeholder="Password" property="password" required=true helpText="Minimum 6 characters"}}
            {{form.element controlType="radio" label="Radio" property="radio" options=radioOptions optionLabelPath="label"}}
            {{form.element controlType="checkbox" label="Checkbox" property="checkbox"}}
            {{form.element controlType="textarea" label="Textarea" property="textarea"}}
            {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
          {{/bs-form}}
{{outlet}}

这是一个样本模板，它来自于会员引导文档中的表单组件。

正如我所说的，当我去访问新的路由时，我没有得到任何呈现，并且上面显示了错误消息。

我觉得我一定是忽略了方向的某些部分.有什么明显的遗漏吗？

编辑响应REAL_ATE的回答

因此，回应克里斯(real_ate)在下面提出的观点。我用的是Ember 3.8

现在，我真的很高兴在精彩的“我可以问一个问题”，我还没有看这周，所以我去看。这似乎真的很奇怪，你得到了一个与我不同的错误，所以我决定开始一个新的项目，并尝试我自己的重建。

我发现，我得到的正是您看到的错误(其他人可以查看在这里的那个部分)，而不是我显示的屏幕截图。

所以我对此很困惑，但这确实证实了你的发现。

我最好的猜测是..。大约在同一时间，我一直在用另一个插件来处理一些问题，为了记录这个过程，我对这些错误进行了一些屏幕转储。我相信我可能选择了错误的屏幕转储，并将它粘贴到问题中。奇怪的是，克里斯在这一段的开头提到我没有真正复制堆栈轨迹，而是使用了堆栈跟踪的屏幕截图--也许如果我真的复制堆栈跟踪，我就不太可能做什么，看起来我做了什么。

所以..。为了子孙后代，最初的错误是.

Uncaught Error: Assertion Failed: An action named 'submit' was not found in <est@controller:login::ember231>
    at assert (index.js:163)
    at makeClosureAction (glimmer.js:6069)
    at action (glimmer.js:5995)
    at Object.evaluate (runtime.js:266)
    at AppendOpcodes.evaluate (runtime.js:72)
    at LowLevelVM.evaluateSyscall (runtime.js:3471)
    at LowLevelVM.evaluateInner (runtime.js:3417)
    at LowLevelVM.evaluateOuter (runtime.js:3409)
    at VM.next (runtime.js:5530)
    at TemplateIteratorImpl.next (runtime.js:5632)

它是通过对为此目的创建的控制器提供一个“提交”操作来解决的，然后该操作揭示了一个与.hbs示例不同的问题，该示例来自成员-引导程序，包括不存在的formLayout=formLayout，除非您已经定义了它，而且它的错误看起来如下……

Uncaught Error: Assertion Failed: must provide a valid `formLayout` attribute.
    at Object.assert (index.js:163)
    at Class.<anonymous> (bs-form.js:11)
    at ComputedProperty.get (metal.js:2966)
    at _get (metal.js:1591)
    at RootPropertyReference.compute (glimmer.js:535)
    at RootPropertyReference.value (glimmer.js:384)
    at SimpleClassNameBindingReference.compute (glimmer.js:4002)
    at SimpleClassNameBindingReference.value (reference.js:367)
    at ClassListReference.value (runtime.js:1283)
    at ComponentElementOperations.flush (runtime.js:1645)

..。正如我描述在我下面的回答中时，这个问题得到了解决。

所以，感谢克里斯和珍，为这个误导的问题道歉。

Answer 1

好吧，为了其他可能有同样问题的人，我会亲自回答这个问题。我通过Emberjs的不和得到了一些帮助，并引用他的话.

不幸的是，成员-bootstrap.com上的例子并不是很聪明，因为它们显示了有界的属性，而不是实际值。例如，只有在控制器上有一个formLayout=formLayout属性时，formLayout=formLayout才有意义。如果不是这样(我假设)，formLayout将是未定义的。你能试着把它移开看看是否有用吗？(或用常量值替换，如formLayout=“水平”)

我照他的建议做了，这解决了问题。

Answer 2

谢谢你的问题，并给出了一个完整的例子，如何重现这个问题。

我花了一些时间试图重新创建问题，但我找不到同样的问题，我无法使它以您所描述的方式出错。我甚至在一个更老版本的Ember中尝试过，看它是否与此有关，但没有帮助。

当我尝试的时候，我学到了一件事，那就是你作为3个不同的步骤所做的初始化实际上可以在所有一行上完成：

ember install ember-bootstrap --preprocessor=sass --bootstrap-version=3

它显示了一个--preprocessor is not a known parameter for ember-cli错误，但是它仍然像预期的那样工作。

我们也遇到了同样的问题，我们需要为表单定义formLayout以使其正常工作，但是我们看到的错误与您看到的错误不一样，您能告诉我们您正在处理的是哪个版本的Ember吗？

我可以看到你已经回答了你自己的问题，但我仍然有兴趣了解你看到的错误的真相(如果你感兴趣的话)。

这个问题是作为第二季第三集“我可以问一个问题”的一部分回答的。如果你想看我们详细讨论这个答案，你可以在这里查看视频：https://youtu.be/nQsG1zjl8H4。