mercredi 20 avril 2016

Ember.js silent fail when rendering a template

I'm working on my first Ember app and ran into an issue I'm so far unable to solve.

I have two models: properties and facilities. Properties can have multiple facilities. To maintain the facilities for a property, I have a page where the user can choose to add a new facility.

The router entries:

Router.map(function() {
  ...
  this.route('properties', function() {
    this.route("index");
    this.route("new");
    this.route("edit", {path: "/:property_id/edit"});
    this.route("facilities", {path: "/:property_id/facilities"}, function() {
      this.route("new");
    });
    ...
  });
  ...
});

The new route points to new.js in properties/facilities:

import Ember from "ember";

export default Ember.Route.extend({

    model() {
      return this.store.createRecord('facility');
    },

    setupController: function(controller, model) {
      this._super(controller, model);
      controller.set("title", "Create a new facility");
      controller.set("buttonLabel", "Create");
    },

    renderTemplate() {
      this.render("properties/facilities/form");
    },

    actions: {
      saveFacility(newFacility) {
        newFacility.save().then(() => this.transitionTo('properties'));
      },
      willTransition() {
        let model = this.controller.get("model");

        if (model.get("isNew")) {
          model.destroyRecord();
        }
      }
    }
});

The template that should be displayed (form.hbs) is located at properties/facilities, which looks like:

<h2></h2>

<div class="row">
  <div class="col-md-6">
    
  </div>
  <div class="col-md-4">
    
      <br/>
    
  </div>
</div>

The facility-item-form is a component in the templates/components directory. I've not included it here as it's just a Bootstrap form.

The page to add a new facility is reached by clicking on a button in the page that lists all facilities for a given property:

Add facility

It all works well, except for the fact that the page for a new facility is not rendered. I've added debugger in the renderTemplate function in new.js to force a halt. I can see by stepping through the code that the render function appears to complete normally. I also added the helper as the first line in form.hbs but that doesn't generate a break. So the conclusion seems justified that the template isn't reached / loaded, however there are no errors in the console.

What am I doing wrong?




Aucun commentaire:

Enregistrer un commentaire