ember-bootstrap 呈现表单时出错

Question

我在使用 ember-bootstrap 呈现表单时遇到问题。访问路由时，不会呈现任何内容，并且在控制台中显示消息

出现。

该项目是一个 Bootstrap 3 项目，我刚刚安装了 ember-boostrap。为此，我执行了以下操作：

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

通过阅读 doco，我相信这是正确的命令顺序？

然后我创建了一条新路线，并在模板中输入了以下内容：

{{#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}}

ember-bootstrap doco 中表单组件的示例模板。

正如我所说，当我去参观新路线时，我没有得到任何渲染和上面显示的错误消息。

我觉得我一定是忽略了部分说明……有什么明显遗漏的吗？

根据 REAL_ATE

的回答进行编辑

所以回应下面克里斯（real_ate）提出的观点。我正在使用 Ember 3.8 .

现在我真的很高兴能在优秀的 "May I Ask A Question" 中亮相，这几周我还没有看过所以我去看了。你得到的错误与我的不同，这似乎真的很奇怪所以我决定开始一个新项目并尝试我自己的重建。

我发现我得到的错误与您看到的完全相同（其他人可以查看 that segment of the vid here），而不是我显示的屏幕截图。

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

我最好的猜测是......大约在同一时间，我一直在处理另一个插件的一些问题，并记录我对这些错误进行的一些屏幕转储的过程。我相信我可能选择了错误的屏幕转储并将其粘贴到问题中。奇怪的是，Chris 在该部分的开头提到了一些关于我实际上没有复制堆栈跟踪，而是使用了堆栈跟踪的屏幕截图的事情——也许如果我真的复制了堆栈跟踪，我就不太可能做些什么，它似乎有可能，我做到了。

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

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)

通过在为此目的创建的控制器上提供 'submit' 操作解决了这个问题，然后揭示了来自 ember-bootstrap 的示例 .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)

...已按照我的描述解决 .

非常感谢 Chris 和 Jen，对于误导性的问题深表歉意。

Answer 1

好吧，为了其他可能有同样问题的人，我将自己回答这个问题。我通过 Emberjs discord 从 add-on 维护者那里得到了一些帮助，并引用他的话......

The examples on ember-bootstrap.com are unfortunately not very smart, in that they show bounded properties as such and not with the actual value. For example that formLayout=formLayout only makes sense if you also have a formLayout property on your controller. If that's not the case (which I assume), formLayout will be undefined. Can you try removing that and see if it helps? (or replace with a constant value like formLayout="horizontal")

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

Answer 2

感谢您提出问题并提供如此完整的示例来说明如何重现问题。

我花了一些时间尝试重现您遇到的问题，但我找不到相同的问题，而且我无法按照您描述的方式使其出错。我什至在 Ember 的旧版本中尝试过这个，看看它是否与此有关，但没有帮助。

我在尝试这个时确实学到的一件事是，您正在执行的 3 个不同步骤的初始化实际上可以在所有一行上完成：

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

它显示了一个错误 --preprocessor is not a known parameter for ember-cli 但它仍然按预期工作

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

我看到您已经回答了自己的问题，但我仍然有兴趣深入了解您看到的错误（如果您有兴趣）

此问题已作为 "May I Ask a Question" 第 2 季第 3 集的一部分得到解答。如果您希望看到我们完整讨论此答案，您可以在此处观看视频：https://youtu.be/nQsG1zjl8H4

ember-bootstrap 呈现表单时出错

ember-bootstrap errors when rendering a form

ember.js

twitter-bootstrap-3

ember-addon

ember-bootstrap