Search⌘ K
AI Features
Home
Courses
Introduction to Marionette.js – The Backbone Framework

Wiring up the Show Event

Explore how to wire the Show event in Marionette by adding Show buttons to contact templates. Understand event handling to prevent default browser navigation and trigger the display of contact details in dedicated views, enabling interactive app functionality.

We'll cover the following...

So far, we’ve implemented the functionality to display a list of our contacts. Let’s display contacts on dedicated pages now.

Adding the “Show” button

First, let’s add a “Show” button in our template:

PHP
<script type="text/template" id="contact-list-item"> 
  <td><%- firstName %></td>
  <td><%- lastName %></td>
  <td>
  <a href="#" class="btn btn-small js-show"> 
      <i class="icon-eye-open"></i>
      Show
  </a>
  <button class="btn btn-small js-delete">
    <i class="icon-remove"></i>
      Delete
    </button>
  </td>
</script>

Notice we’ve already ...