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 (7) [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 (25) [Avatar] Offline
    #4
    Hi Bruce,

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

    Cheers,
    Sean
    505970 (10) [Avatar] Offline
    #5
    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>
    

    Sean Hunter (25) [Avatar] Offline
    #6
    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
    505970 (10) [Avatar] Offline
    #7
    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.
    Sean Hunter (25) [Avatar] Offline
    #8
    Nice catch. I'll review this and get it updated for the upcoming MEAP smilie.

    Cheers,
    Sean