bad code for app.html

[adriatic]

This view is being updated to show the details of the selected contact. Note that the code for the updated view:

<template>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Profile</h3>
    </div>
    <div class="panel-body">
      <form role="form" class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">First Name</label>
          <div class="col-sm-10">
            <input type="text" placeholder="first name" class="form-control" value.bind="contact.firstName">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Last Name</label>
          <div class="col-sm-10">
            <input type="text" placeholder="last name" class="form-control" value.bind="contact.lastName">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input type="text" placeholder="email" class="form-control" value.bind="contact.email">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Phone Number</label>
          <div class="col-sm-10">
            <input type="text" placeholder="phone number" class="form-control" value.bind="contact.phoneNumber">
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="button-bar">
    <button class="btn btn-success" click.delegate="save()" disabled.bind="!canSave">Save</button>
  </div>
</template>

is just a "partial" for the highlighted part of the main view:

meaning that the tutorial needs to be corrected. Rather than pointing Rob to this issue, can you please update this so I can learn how this works (I believe that this should be done using compose)

[JeroenVinke]

you already had a contact-detail.js, but no view (contact-detail.html).

I created contact-detail.html with the HTML you provided and that made it work.

When you click on a contact from the list, the route changes because of the route-href

this triggers the following route (which in app.js):

    config.map([
      { route: '',              moduleId: 'no-selection',   title: 'Select'},
      { route: 'contacts/:id',  moduleId: 'contact-detail', name: 'contacts'}  <------
    ]);

This triggers aurelia to load contact-detail (.js and .html) in the <router-view> that's in app.html.

[adriatic]

There is a slight chance for a misunderstanding here, so please bear with me for a little while more.

The application in question is Rob's tutorial, which has several "typos / omissions" that I would like to solve without telling him about them. The code in this repo is written by me following the tutorial, so I need to make references to that tutorial to ensure you get my drift.

As you said, there is the view model (contact-detail.js) without the matching view (contact-detail.html).

I created contact-detail.html with the HTML you provided and that made it work.

Where is the contact-detail.html that you created ?

[adriatic]

Look at the tutorial text here and scroll down a couple of pages until you see this

meaning that you did not have to create contact-detail.html - but rather "include" the code above to the main view (app.html)

Am I missing something - or you responded without complete understanding of my question?

[adriatic]

Fixed in https://github.com/aurelia-ui-toolkits/cm-bridges/commit/0f463966f907f32f443e24092f7974f1ceec5010