Yet more Geek ruminations to clutter up the internets.

This is my continuing efforts to work with the Ember JS (www.emberjs.org) Framework. The expectation is to build a simple wish list of items. Part one started the Ember application, part two started our first route, part three added a Click Event to the code while part four introduced components for code reuse. Today's section works on integrating Bootstrap into the framework.

There is an Ember CLI element that does some of this work for you, but I just worked with integrating the artifacts from the Bootstrap website directly into my project.

To start with, I just worked with the CDN version of Bootstrap (https://getbootstrap.com) as I wanted to get it working before I worried about having downloaded artifacts. So, I first went to the getting started page for Bootstrap which provides the necessary links for CDN.

Then I opened up the index.html file to add the CDN references there, placing them between the content-for components for the "head" and "head-footer" in the HEAD section of this file.

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>EmberLearn</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for "head"}}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"; integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"; integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"; integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"; integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    {{content-for "head-footer"}}

  </head>

This means that the pages will include the Bootstrap elements as they're served. Now, my initial thought was that I'd be able to add the "container" DIV to this file, wrapping it around the content-for component for the body and body-footer. This didn't work. The EMBER content was served outside of the container DIV.

Instead, you need to open up the application.hbs, which is the global template for the Ember content, and add the container DIV here.

<div class="container">
    <h1>Wish List</h1>

    {{outlet}}
</div>

Elements like the NAVBAR could be implemented in either the index.html or application.hbs files.

But, this isn't the end of things. We now need to style our item-list component to display its content within the context of Bootstrap elements.

So, we open up the item-list component template file, and wrap the H2 element, and the UL elements within row DIVs and column DIVS

<div class="row">
    <div class="col-12">
        <h2>{{title}}</h2>
    </div>
</div>
<div class='row'>
    <div class="col-12">
        <ul>
            {{#each items as |item|}}
            <li {{action "showItem" item}}><cite>{{item}}</cite></li>
            {{/each}}
        </ul>
    </div>
</div>

This is a step in the right direction, but we also want the items to be displayed in a slightly better context as well. So, we'll switch the LI out for a DIV that implements the CARD class, and replace the UL with a DIV that implements he card-columns class. With a bit of CSS Styling, we end up with a nice set of boxed titles that still react to a user event.

Now, to make this server local assets for the Bootstrap libraries, for scenarios where you don't want functionality to change as things are updated, then you'd download the CSS and JS files and place them in the ASSETS folder of the application.

Then change the references to the CDN to reference "{{rootURL}}assets/" instead. Everything should just work at that point.

Learning Ember -- Integrating Bootstrap