javascript - 使用 bootstrap modal 和 ember

Question

我有一个 Bootstrap 模式的工作版本，它打开一个 json 的嵌套列表(“选项”)，如下所示:

{ 
   product: [{
      id: 1,
      title: 'Some dope shoes',
      options: [
        { id: 1, name: 'Color' },
        { id: 2, name: 'Size' }
      ]
    },
    {
      id: 2,
      title: 'Some dope',
      options: [
        { id: 3, name: 'Lenght' },
        { id: 4, name: 'Flavor' }
      ]
    }
  ]
}

我已经用模板编写了模态的所有内容，我确实使用了任何文件组件。诀窍是制作uniq modal id。网址如下:

<a href="#" data-toggle="modal" data-target="#ma-modal{{optionid}}" title={{title}}>{{mmmh}}</a>

模态框看起来像:

<div class="modal" id="ma-modal{{optionid}}"></div>

我对这段代码没有信心，因为我正在学习 ember，我想知道在没有任何文件组件的模板中执行所有这些操作是否有问题？

在我看来，使用ids就像是一种黑客行为。

Answer 1

在我看来，为模态创建组件是一种更好的解决方案，因为:

• Ember 将生成 id，您将可以访问生命周期 Hook 内的渲染元素，因此在许多情况下不需要知道 id。
• 您可能需要调用一些 js 函数来显示模式。组件提供了通过使用生命周期钩子(Hook)在正确的时刻(渲染所有元素之后)执行此操作的可能性
• 如果需要，可以轻松地重复使用组件。

您可以在documentation中找到有关组件的所有必要信息。此外，您可以在 this 中阅读有关新的(在 1.13 中引入)lyfecycle Hook 的信息。博客文章。

当然，如果您能找到合适的插件，您可以使用众多 ember-cli 插件之一