CODEWITHSUNDEEP
ember.jsember-data
Bins
Bins

Reputation: 322

Ember data this.store getting undefine

I want to add new record to store using emberdata.Js but not working Here is my code

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ED: Reading" />

<script src="js/jquery-1.10.2.js"></script>
<script src="js/handlebars-1.1.2.js"></script>
<script src="js/ember-1.5.1.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.prod.js"></script>



<script type="text/javascript">

App = Ember.Application.create();

App.Store = DS.Store.extend({
revision: 12,
url: 'http://localhost/Ember/Demo2/'
});

App.Pull = DS.Model.extend({
title: DS.attr(),
url: DS.attr(),
});

App.Router.map(function(){
this.resource('pull');
});

var store = this.store;

//var obj = App.Pull.createRecord();



App.PullRoute = Ember.Route.extend({
model: 
    function() {
        store.createRecord('pull', {
title: 'Rails is Omakase',
url: 'Lorem ipsum'
});
    //return this.store.find('pull');
    //return App.Pull.find();
    //this.store.createobjects(response);
    }
});




</script>

</head>
<body>

<script type="text/x-handlebars">
 <h1>Welcome</h1>
 <div class="navbar-header">
      {{#link-to 'pull' classNames='navbar-brand'}}
        City List
      {{/link-to}} 
    </div>
 {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="pull">
 <h2>GetAllCityList</h2>
 <div class="navbar-header">
 <ul>
 {{#each model}}
    <li>{{title}}</li>
 {{/each}}
 </ul>
 </div>

</script>



</body>
</html>

I am trying to add record to store type of model on calling of model city but this.store is giving me undefined.

below is error in ember insepctor

Error while loading route: TypeError: Cannot read property 'createRecord' of undefined
at App.PullRoute.Ember.Route.extend.model   (http://localhost/Ember/Demo2/storedemo.html:42:9)
at superWrapper [as model] (http://localhost/Ember/Demo2/js/ember-1.5.1.js:1292:16)
at Ember.Route.Ember.Object.extend.deserialize (http://localhost/Ember/Demo2/js/ember-1.5.1.js:36570:19)
at http://localhost/Ember/Demo2/js/ember-1.5.1.js:32972:57
at http://localhost/Ember/Demo2/js/ember-1.5.1.js:33464:19
at invokeResolver (http://localhost/Ember/Demo2/js/ember-1.5.1.js:9646:9)
at new Promise (http://localhost/Ember/Demo2/js/ember-1.5.1.js:9632:9)
at Router.async (http://localhost/Ember/Demo2/js/ember-1.5.1.js:33463:16)
at Object.HandlerInfo.runSharedModelHook (http://localhost/Ember/Demo2/js/ember-1.5.1.js:32971:16)
at Object.UnresolvedHandlerInfoByParam.getModel (http://localhost/Ember/Demo2/js/ember-1.5.1.js:33058:19)

>this.store
undefined

Upvotes: 1

Views: 1845

Answers (4)

Daniel Thompson
Daniel Thompson

Reputation: 2351

Just FYI From Ember models docs:

"The store object is available in controllers and routes using this.store"

I was running into this error because I was attempting to access the store from a component.js file.

Really helpful article on this problem from Josh Farrant here

Upvotes: 1

Nadeem
Nadeem

Reputation: 36

I don't see any issue. I did get the store returned when i tried it. I just created a jsbin in case you might want to check.

http://emberjs.jsbin.com/zesemuqe/1/edit

I did find two issues. 1. You sure are trying to create a record which gets it into the store. But you are not returning it.

App.PullRoute = Ember.Route.extend({
    model: function() {
        return this.store.createRecord('pull', {
            title: 'Rails is Omakase',
            url: 'Lorem ipsum'
        });
    }
});

2.Secondly, I can see that you are trying to loop over the model which is not an array and just an object, so handlebars does throw an error on that.

<script type="text/x-handlebars" data-template-name="pull">
    <ul>
        <li>{{title}}</li>
    </ul>
</script>

And I know it surely isn't the issue, but did you load all the dependencies correctly, the jsbin is missing them ?

Upvotes: 0

corinna000
corinna000

Reputation: 151

Looks like a scoping issue. You're assigning 'var store = this.store;' in the scope of your application, but Ember.js creates new objects based on your extended definition of Ember.Route and so the scope for 'store' in App.PullRoute may be different than it appears.

Try this:

App.PullRoute = Ember.Route.extend({
model: function() {
        this.store.createRecord('pull', {
          title: 'Rails is Omakase',
          url: 'Lorem ipsum'
          });
     }
});

Upvotes: 0

Thomas Z.
Thomas Z.

Reputation: 9

You might use following way to create your record:

...
var obj = store.createRecord('pull', {
    title: 'Rails is Omakase',
    url: 'Lorem ipsum'
});    
obj.save().then(function(record){
    return record;
});

Upvotes: 0

Related Questions