title: Custom modal Durandal
body: <p>I have been trying to work with the durandal framework and must say I'm very pleased. I'm using the Movie tutorial by <a href="http://stephenwalther.com/" rel="nofollow">http://stephenwalther.com/</a> and have made some changes. With help of the Ryan Keeters Youtube video's. I have accomplished editing movies with modals.</p>
  
  <p>But I can't get it to work to add new movies via a modal.</p>
  
  <p>I have created a add.html and add.js but when the link for creating a new movie is clicked and the modal shows it shows the page i'm at in the middle (like a loop when I click further).</p>
  
  <p>THis is my binding on show.html:</p>
  
  <pre><code>&lt;a data-bind="click: viewAddMovieModal"&gt;Add Movie&lt;/a&gt;
  </code></pre>
  
  <p>And this is the javascript:</p>
  
  <pre><code>define(function (require) {
      var self = this;
  
      var vm = {
          activate: activate,
          title: 'movies page',
          movies: ko.observableArray([])
      };
      //return vm;
  
     // self.moviesRepository = require("repositories/moviesRepository");
      self.router = require('durandal/plugins/router');
      self.system = require('durandal/system');
      self.app = require('durandal/app');
      self.movie = require('viewmodels/movie');
      self.addmovie = require('viewmodels/add');
      //self.Movies = ko.observableArray([]);
      self.viewMovieModal = function (movie, element) {
          self.app.showModal(movie).then(function (result) {
              if (result) {
                  //self.app.showMessage(result.toString(), result.toString());
                 vm.movies.remove(movie);
              }
          }).fail(function (result) {
              self.app.showMessage(result.toString(), "Something went wrong!");
          });
      };
  
      self.viewAddMovieModal = function (addmovie,element) {
        //  self.app.showModal(addmovie).then(function (result) {
           //   self.app.showMessage(result.toString(), result.toString());
        //  });
          self.app.showModal(null, element, addmovie);
      };
  
      init();
  
      function init() {
          vm.movies.push(new movie("Star wars", "Piet"));
          vm.movies.push(new movie("Harry Potter", "Jan"));
          vm.movies.push(new movie("Hangover", "Klaas"));
      }
  
      function activate() {
          self.system.log("I get in the activate function!");
      }
  
      return {
          activate: activate,
          movie: movie,
          addmovie:addmovie,
          vm:vm,
          viewMovieModal: viewMovieModal
      };
  });
  </code></pre>