264445 (2) [Avatar] Offline
#1
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
    125443 (2) [Avatar] Offline
    #2
    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 smilie:

    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
    b.merritt (4) [Avatar] Offline
    #3
    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
    Sean Hunter (14) [Avatar] Offline
    #4
    Hi Bruce,

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

    Cheers,
    Sean