使用bootstrap模态和余烬

时间:2015-09-25 15:00:19

标签: javascript twitter-bootstrap ember.js

我有一个工作版本的bootstrap模式,它打开了一个看起来像这样的json的嵌套列表(' options'):

{ 
   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模态id。网址看起来像:

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

模态如下:

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

我对这段代码并不感到自信,因为我学习了ember,我想知道如果在没有任何文件组件的情况下在模板中完成所有这些操作是不是很糟糕?

使用 ID 在我看来是一个黑客。

1 个答案:

答案 0 :(得分:1)

在我的观点中,为模态创建组件是一种更好的解决方案,因为:

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

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

当然,你可以使用很多ember-cli插件中的一个,如果你能找到合适的插件