模板中条件性渲染文本的正确方法——或在单次渲染中修改两次 VALUE

开发
1

我有一个插件，它（几乎）可以创建 Digital Ocean Droplet 并安装 Discourse。

我有一个页面，其中包含一个模板，用于渲染有关 Rails 模型、它创建的 Droplet 以及在该 Droplet 上安装的 Discourse 实例的内容。我已经通过 MessageBus 让所有必要的信息在 Rails 和 Ember 之间流动。我需要根据以下情况显示不同的内容：

  • 是否有足够的信息来创建 Droplet
  • 创建 Droplet 的任务是否正在运行（它会更新模型中的数据）
  • Discourse 是否已安装

但我一直遇到以下错误：

   You modified "hasStatus" twice on <@ember/component:ember660> in a single render.

编辑：原来是因为我有两个 computed 函数在监听同一个东西……

我想我终于意识到，我不能在模板中使用类似 {{#if hasStatus}}（这是一个 computed 函数）的方式来实现这一点，因为页面需要在用户点击“创建 Droplet”按钮后重新渲染，以显示状态（因为该按钮会设置 installation_status 变量，用于显示安装过程中的状态）。

或者，也许我还有其他错误触发了这个问题，而我当前的做法其实是可行的？

所以，我猜测我需要做的，是使用 <gasp> CSS 来隐藏各种元素？

2

好吧，正如我发布此类内容时经常遇到的情况，答案比我想象的还要离奇。

如果我使用像 {{#if server.value}} 这样的代码，并且 value 由 MessageBus 推送出来，那么当我从 Rails 控制台执行更新时，一切都会按预期工作。我可以将其设置为 nil 或非 nil，页面的相应部分也会按预期出现或消失。当我从终端运行 Ansible 任务时，Ansible 会通过路由推送一个新值，该值会更新记录，然后推送到消息总线，模板中的相应部分也会按预期出现。

但是，如果 Ansible 是由 Discourse 的作业触发的，我仍然看到 Rails 声称正在将数据推送到消息总线。在浏览器的 JavaScript 控制台中，我看到跟踪该值的计算函数被触发，但值为 null。如果我重新加载浏览器，数据就会出现，页面也会按预期渲染。也许这是开发环境的一些怪癖，在生产环境中会有所不同。

这可能与以下情况有关吗？

image
image412×159 15.3 KB

好吧，我仍然担心那个错误，但我在操作中添加了

window.location.reload(true);

之后页面重新加载，一切似乎都正常工作了。