Hello Sean,
Picking up Aurelia again and following the example in chapter3. I noticed a few issues:

The listing 3.3 for the app.js I think requires bootstrap to be installed locally (it's not mentioned in the previous text).

I have a problem with listing 3.15. I am getting the error message in the console: "$(...).tooltip is not a function". It points to the attached method.

I am getting some strange messages when I put in the third party tools (bootstrap, jquery). I see in the console the error messages (unreachable code after return) pointing to vendor-bundle.js (line 3599).

I've tried to hunt around to see where I am going wrong, but I'm not sure (perhaps these are just my problem).

hth
adil

Hi Adil,

Thanks for getting in touch. You're absolutely right.

Listing 3.3 should be as follows:

<template>
    <require from="styles.css"></require>
  
     <div class="container">
        <div class="header clearfix">
        <h3 class="text-muted"><span class="brand-highlight">my </span> books</h3>
      </div>
      <router-view></router-view>
      <footer class="footer">
        <p>&copy; Aurelia Demo 2017</p>
      </footer>

    </div> <!-- /container -->

</template>

I'll be sure to get this corrected in the next update. If your ./index.html file is as follows:

https://github.com/freshcutdevelopment/Aurelia-in-Action/blob/master/Chapter-3-Complete/my-books/index.html

Then Bootstrap and jQuery should work. In case you're still having problems you can check out the completed working version of chapter 3 here:

git clone https://github.com/freshcutdevelopment/Aurelia-in-Action.git
cd Chapter-3-Complete\my-books
npm install
au run --watch

You can jump to any completed working chapter using that method, and if you find that my listings for how to complete each of the steps are incorrect or misleading, then please let me know as you've done here :

There is one issue with the Bootstrap alpha version that you may see the following error in the console log on tooltip hover:

Uncaught Error: Tooltip is transitioning
    at h.show (bootstrap.min.js:7)
    at h._enter (bootstrap.min.js:7)
    at HTMLSpanElement.<anonymous> (bootstrap.min.js:7)
    at HTMLSpanElement.handle (jquery-3.1.1.slim.min.js:3)
    at HTMLSpanElement.dispatch (jquery-3.1.1.slim.min.js:3)
    at HTMLSpanElement.q.handle (jquery-3.1.1.slim.min.js:3)

This one can be safely ignored but will be corrected in the next update which includes a transition to the Bootstrap 4 beta.

If you still have problems after checking out the completed version then please let me know by replying to this thread. If you'd like to share you're working copy with me I'd be happy to take a look and help diagnose any problems as well.

Cheers,
Sean

On page 79, listing 3.18, there is no mention of importing bindable from aurelia-framework. On page 75 the import statement is, import {inject} from 'aurelia-framework' and on page 79 it needs to be import {inject, bindable} from 'aurelia-framework'.

Bruce

Hi Bruce,

Thanks for highlighting this! Have noted it down for correction in the next MEAP update.

Cheers,
Sean

I have noticed that the code samples for book-list 3.4 and/or 3.16 is missing the <div class="book row"> above <div class="col-10">${book.title}</div>. so if you place the missing line in 3.4 it should look like

<template>

    <ul class="books list-group list-group-flush">

      <li class="list-group-item" repeat.for="book of books">

        <div class="book row>
            <div class="col-10">${book.title}</div>

        </div>

      </li>

    </ul>

</template>

or 3.16 would look like
view source

<template>

  <require from="../attributes/tooltip"></require>

  ..

          <div class="book row">

              <div class="col-10">${book.title}</div>

              <div class="col-1">

                   <span class="remove-button"       

                      click.delegate="removeBook($index)"

                      tooltip

                      title='Remove book from list'>

                      <i class="fa fa-trash" aria-hidden="true"></i>

                  </span>

              </div>

          </div>

  ..

</template>

Ah nice find. Thanks for the feedback. It's actually great timing since I'm in the midst of preparing for the next MEAP update. I'll incorporate this fix.

Cheers,
Sean

Sean,

I see that in chapter 4 in section 4.2 listing 4.6 you are also editing book-listing. it is also missing the same div as chapter 3 is. glad the feedback is helping.

Nice catch. I'll review this and get it updated for the upcoming MEAP .

Cheers,
Sean

Checked out latest Chapter-3-Complete from:

https://github.com/freshcutdevelopment/Aurelia-in-Action/tree/master/Chapter-3-Complete/my-books

Building and running gives 404 error when requesting "http://localhost:9000/popper.js" - and console error:

Unhandled rejection Error: Script error for "popper.js", needed by: bootstrap/js/bootstrap.min
http://requirejs.org/docs/errors.html#scripterror
at makeError (http://localhost:9000/scripts/vendor-bundle.js:3962:17)
at HTMLScriptElement.onScriptError (http://localhost:9000/scripts/vendor-bundle.js:5532:36)

It seems that you can fix this by:

updating to latest version - "bootstrap": "^4. 0.0"

removing the prepend entry - "node_modules/popper.js/dist/umd/popper.min.js"

using the popper bundled with bootstrap - eg, change to "js/bootstrap.bundle.min"

 "jquery",
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist",
            "main": "js/bootstrap.bundle.min",
            "deps": [
              "jquery"
            ],
           "exports": "$",
           "resources": [
             "css/bootstrap.css"
            ]
          },
  

Ah thanks for raising this! I'll look into it and get a fix applied to the GitHub repo .

Cheers,
Sean