Ember.js : Cannot access what model() hook is returning in controller

Question

i'm quite new to ember and new to Web developement in general.

I'm working with the latest release of ember

I'm trying to redirect to some pages through an action "Browse" which compares input Title and Keyword with the ones from a "Theme" from the database(Firebase). If they match I can see my page, if they don't I'll throw an error.

Here is the code,

Index.hbs

 <div class="jumbotron">
    <div class="container">
    <form>
      <div class="form-group">
        <label for="inputTheme">Theme</label>
    {{input type="theme" value=inputTheme class="form-control" id="inputTheme" placeholder="Theme"}}
      </div>
          <div class="form-group">
        <label for="inputKeyword">Password</label>
        {{input type="password" value=inputKeyword class="form-control" id="inputKeyword" placeholder="Keyword"}}
      </div>
    <button class='btn btn-info' {{action 'browse'}}>Browse</button>
    </form>
      </div>
    </div>

index.js (Controller)

import Ember from 'ember';

export default Ember.Controller.extend({
  isDisabled: true,

  inputTheme: '',
  inputKeyword: '',    

  actions: {
    browse() {
        this.transitionToRoute("/themes/:theme_id/browse");
    }

  }
});

index.js (Route)

import Ember from 'ember';

export default Ember.Route.extend({
    model()
    {
        this.store.query('theme', {
        orderBy: 'title',
        equalTo: this.get('inputTitle')
      }).then(function(data) {
        return data.get('firstObject');
      });

    }
});

Router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('about');
  this.route('contact');
  this.route('browse', { path: '/themes/:theme_id/browse'});


  this.route('admin', function() {
    this.route('contacts');
  });

  this.route('themes', function() {
    this.route('new');
    this.route('edit', { path: '/:theme_id/edit'});
    this.route('browse', { path: '/:theme_id/browse'});
  });
});

export default Router;

Theme.js (model)

import Ember from 'ember';
import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({
  title: attr('string'),
  keyword: attr('string'),
  master: attr('string'),
  description: attr('string'),

});

The thing is :

1) I don't have any access to "inputTitle" from the route so I can't Query dynamically. Though when I do it the hard way it gets what I need.

2) When I try to access model from my controller it says that there's nothing in it.

What did I miss ? What did I do wrong ?

Here is a link to the current App

https://euretest.firebaseapp.com/

Thank you in advance for your help :)

Answer 1

In you route model hook you need to return the query you made.

import Ember from 'ember';

export default Ember.Route.extend({
model()
  {
    return this.store.query('theme', {
      orderBy: 'title',
      equalTo: this.get('inputTitle')
    }).then(function(data) {
    return data.get('firstObject');
    });
  }
});

That will make it available in you controller/template.

As form the 'inputTitle', from this code I can't really see where you define that. Doing this.get('inputTitle') in the route will look for an inputTitle propertie of the route, ie

import Ember form 'ember';

export default Ember.Route.extend({
inputTitle: 'some title',
model()
  {...}
});

During the model hook, controller is not yet initialized so you can't use any of its values.