1

我在使用 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 的回答

因此，回应下面 Chris (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)

通过在为此目的创建的控制器上提供“提交”操作解决了这个问题，然后揭示了来自 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，并对这个误导性问题表示歉意。

4

2 回答 2

1

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

不幸的是，ember-bootstrap.com 上的示例不是很聪明，因为它们显示了有界属性，而不是实际值。例如，只有在控制器上也有属性formLayout=formLayout时才有意义。formLayout如果不是这种情况（我假设），formLayout将是未定义的。你可以尝试删除它，看看它是否有帮助？（或替换为诸如 formLayout="horizo​​ntal" 之类的常量值）

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

于 2019-05-17T23:25:05.610 回答
1

感谢您提出问题并提供了如何重现问题的完整示例。

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

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

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

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

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

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

这个问题作为“我可以问一个问题”第 2 季第 3 集的一部分得到了回答。如果您希望看到我们完整地讨论这个答案，您可以在此处观看视频：https ://youtu.be/nQsG1zjl8H4

于 2019-05-20T11:08:40.473 回答