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。

现在，我真的很高兴能收看出色的“我可以问一个问题”，而这周我还没有看过，所以我去看了。您遇到与我不同的错误真的很奇怪，所以我决定开始一个新项目，然后尝试自己的重建。

我发现的确是我完全看到了您看到的错误（其他人可以查看that segment of the vid here），而不是我所显示的屏幕快照。

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

我的最佳猜测是……大约在同一时间，我与另一个插件一起解决一些问题，并记录了我对这些错误进行一些屏幕转储的过程。我相信我可能选择了错误的屏幕转储并将其粘贴到问题中。奇怪的是，克里斯在本段的开头提到了一些关于我的信息，但实际上并没有复制堆栈跟踪，而是使用了堆栈跟踪的屏幕截图-也许如果我实际上复制了堆栈跟踪，我执行该操作的可能性就会降低，似乎有可能，我做到了。

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

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包含formLayout=formLayout的示例.hbs的另一个问题，除非您' ve定义了它，并且错误看起来像这样……

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)

...如我所述in my answer below一样解决了。

因此，感谢克里斯和詹（Chris）和詹（Jen），并为您引起误解，对不起。

Answer 1

为了其他可能遇到相同问题的人，我将自己回答这个问题。我通过Emberjs不和谐协议从插件维护者那里得到了一些帮助，并引用了他的话...

不幸的是，ember-bootstrap.com上的示例不是很聪明，因为它们显示的是有界属性，而不是实际的值。例如，formLayout=formLayout仅在以下情况下才有意义您的控制器上还有一个formLayout属性。如果那是并非如此（我假设），formLayout将不确定。你是否可以尝试删除它，看看是否有帮助？（或替换为常量像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？

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

该问题已作为“我可以问一个问题”第2季第3集的一部分得到回答。如果您希望我们全面讨论此问题，可以在此处查看视频：https://youtu.be/nQsG1zjl8H4

呈现表单时出现ember-bootstrap错误

2 个答案: