Can't create ember record from console - ember.js

I've just started learning ember.js (v2.0.0), I was following this page, and at one point, the tutorial instructs me to create 4 records from the chrome console. I do exactly as instructed, but nothing happens. No errors, warnings, nothing.
On the Ember Inspector, I'm doing this:
On the console, after clicking ">$E" as mentioned in the image, I'm entering this:
$E.store.createRecord('customer', { name: 'John Smith', location: 'Boston', isSubscribed: false }).save()
$E.store.createRecord('customer', { name: 'Jenny Reed', location: 'New York', isSubscribed: false }).save()
$E.store.createRecord('customer', { name: 'Bill Crawford', location: 'Philadelphia', isSubscribed: true, subscriptionDate: new Date(), subscriptionDuration: 12 }).save()
$E.store.createRecord('customer', { name: 'Cathy Smith', location: 'Boston', isSubscribed: true, subscriptionDate: new Date(), subscriptionDuration: 6 }).save()
This is the screenshot after that.
EDIT: The data tab shows "customer(0)", customer being the model, with no entries. Also, I thought I'll just log what's in $E, but, I can't. I'm not clear with how that works. And, I checked my firebase server too. Nothing there either. But that's ok I guess considering that EmberFire just synced my Ember-Data records to firebase, and the Ember-Data record was empty here.
If things went as expected, I should have had 4 records synced to my firebase server, but that's not what happened.
I have the Ember Inspector from Chrome Web Store installed.
Basically, I've followed the instructions exactly as described in the tutorial.
Hours of googling didn't help.
Any help is appreciated. Thanks.

Related

Drupal 8 Menu Item child of a Task

For my custom Drupal 8 (8.7.8) module, I have the following ...
my_module.reports:
route_name: my_module.reports
title: 'Reports'
base_route: my_module.dashboard
weight: 80
in my menu system in my_module.links.menu.yml and it appears as a tab on my dashboard I'm building. On that page, the route controller I have is...
_controller: '\Drupal\system\Controller\SystemController::systemAdminMenuBlockPage'
I'm hoping to make there a list of further links to reports. But this (from my_module.links.menu.yml) ...
my_module.reports.territories:
title: 'Territories'
description: '...'
route_name: my_module.reports.territories
parent: my_module.reports
weight: 10
Doesn't show up. All I get when I go to that page is:
"You do not have any administrative items."
What am I missing? Is it somehow not possible to make children of tasks in this way or is this something else?
Thanks!
Finally worked it out. I had to ALSO add ...
my_module.reports:
title: 'Reports'
parent: system.admin_config
route_name: my_module.reports
... to my_module.links.menu.yml. I could then leave the link in my_module.links.task.yml as well to create the final thing I wanted.

Updating objects in an Ember many to many relationship

I have an app which allows me to create a message which can be sent to N number of social networks, modeled as follows:
Social.Account = DS.Model.extend({
username: DS.attr("string"),
messages: DS.hasMany("Social.Message")
});
Social.Message = DS.Model.extend({
text: DS.attr("string"),
account: DS.belongsTo("Social.Account")
});
My code for creating a record looks like this:
saveMessage: function(){
var account = Social.Account.find(this.get("id")),
msg = Social.store.createRecord(
Social.Message,
{
text: postingWindow.get('text'),
account: account,
}
);
account.get("messages").addObject(msg);
Social.store.commit();
}
With the form data looking like this:
text:testing one three five seven
message_key:
tags:
user_id:
created:Wed, 19 Jun 2013 21:39:14 GMT
scheduled_at:2013-06-20T03:00:00.000Z
is_editing:false
status:C
account:56
That part works excellent. Now we're working on scheduling future messages, which offers the user the chance to edit them after they've been saved, but before they've been sent. On the surface my implementation seems to work properly, but I noticed that Ember was not sending the account information along with the post, which meant that when my server code ran, the message was being orphaned in the database. Here's the update code:
sendNow: function(message){
var account = Social.Account.find( this.get('controllers.account.id') );
message.setProperties({
scheduled_at: '',
accounts: [account]
// I've also tried accounts: this.get('controllers.account.id')
});
Social.store.commit();
}
And the corresponding form data:
text:testing one three five seven
message_key:
tags:
user_id:17
created:Wed, 19 Jun 2013 21:39:14 GMT
scheduled_at:
is_editing:false
No matter what I do, Ember isn't sending the account data to the server. Is there a more appropriate way to update a record and cause it to be saved properly?
You could try:
message.get('accounts').pushObject(account')
Are you sure the var account is being set? Seems like you are inconsistent with the get statements:
var account = Social.Account.find(this.get("id")) , <- double quotes
var account = Social.Account.find(this.get('controllers.account.id')); <- single quotes and different object structure?
Also, did you try:
message.set('accounts', account);

Ember data sideloaded models ignored

I'm new to Ember, and am having a problem I'm not seeing duplicated anywhere else so I'm sure I'm doing something silly. I have these models:
App.User = DS.Model.extend({
username: DS.attr("string"),
userId: DS.attr("number"),
modules: DS.hasMany("App.Module")
});
App.Module = DS.Model.extend({
moduleId: DS.attr("number"),
name: DS.attr("string")
});
Note that my Module model is simply a container that a User can have a few of, and many users might share the same modules - they're actually represented by an Enum on the server. As such, the backend does not have a mapping of Module > Users, so I've left the DS.ownedBy or DS.hasMany out of App.Module. I have, however, tried my test with a "users: DS.hasMany('App.User')" in there as well, with the same result. If it turns out to be necessary, I could maintain such a mapping, but I have no other reason for doing so right now, so it would be a bit unfortunate to be forced to add such a table to my database.
I'm using Ember.Auth for authentication, and when my app loads up and I log in, the server requests (as expected):
users/nathan?authToken=<token>
The result is also as I think it should be, according to the ember data docs:
{
"user": {
"username": "nathan",
"user_id": 1,
"module_ids": [1,2]
},
"modules": [
{"module_id": 1, "name": "Account Settings"},
{"module_id": 2, "name": "Manage Websites"}
]
}
I'm then testing in the Chrome console with:
App.Auth.get("user").get("modules");
or
App.User.find("nathan").get("modules");
and in both cases, Ember makes a request to my server to get the data for Modules 1 and 2. If I repeat the same request, it doesn't go back to the server again, so it is storing the result properly that time, it's simply the sideload that it's ignoring.
I'm using ember-1.0.0-rc4 with ember-data-0.13.
In your sideload response, module_id should be id.
(or you can configure ember-data to use module_id, but formatting the server response should be the easier way?)
--- edit for explanation ---
I'm not sure the original REST call is "working perfectly". Without the id. ember-data does see the two modules that your originally sideloaded, but it sees no id, so it does not know that they are modules 1 and 2 respectively. By default (changeable), ember-data expects the id to be called id; your module_id (and user_id) are just treated as regular properties.
On your next API call (to /modules?ids[]=1&ids[]=2 presumably), ember-data silently assumes that, since your requested two modules, and two modules came back, they should be the two that you requested. Try sending back this
{
"modules": [
{"module_id": 3, "name": "Foo module"},
{"module_id": 4, "name": "Bar module"}
]
}
for the request /modules?ids[]=1&ids[]=2, you will still get your "successful" observation.
Try App.Module.find(1).get('name') with the module_id-response - you will get undefined; now try it with the id-response, and you will get Account settings as expected.
Have you configured your RestAdapter to sideload modules?
Like this:
DS.RESTAdapter.configure('App.Module', {
sideloadsAs: 'modules'
});

Testing Ember-data w/Jasmine and DS.FixtureAdapter

I'm trying to do a Jasmine test of ember-data (using the current master) using the DS.FixtureAdapter. I've tried dozens of variations on the below code (with and without trying to create an Application namespace). I've also gone into the ember-data source to try and see what's going on, as well as referenced the tests in ember-data itself as an example.
I've also tried variations of Person.find(1), using Ember.run blocks and Jasmine wait()'s.
Whatever I try, store.find(Person, 'test') returns a result but attempting to get one of the attributes results in null (test assertion fails). What is it I'm not seeing? Thanks for any help!
describe "a test", ->
store = null
Person = null
beforeEach ->
store = DS.Store.create
revision: 11
adapter: 'DS.FixtureAdapter'
Person = DS.Model.extend
firstName: DS.attr('string')
lastName: DS.attr('string')
age: DS.attr('number')
it "works or does it", ->
Person.FIXTURES = [{
id: 'test'
firstName: 'Kyle'
lastName: 'Stevens'
age: 30
}]
kyle = store.find(Person, 'test')
expect(Em.get(kyle, 'firstName')).toEqual('Kyle')
Whatever I try, store.find(Person, 'test') returns a result but attempting to get one of the attributes results in null (test assertion fails). What is it I'm not seeing? Thanks for any help!
This is a timing issue. When you call store.find() it runs query asynchronously and returns a model promise. That means the query is still running (or scheduled to run) when control returns to your test, resulting in a failed expectation.
This is what we love about ember, it means your app can treat kyle as if the data were present and trust that values will be updated automagically via bindings when the data becomes available.
Of course all this magic is not so great when it is preventing your test from passing. Here are some alternative approaches:
1) Register a didLoad callback
kyle = store.find(Person, 'test');
kyle.on('didLoad', function() {
console.log('should = kyle: ', Em.get(kyle, 'firstName'));
});
2) Instead of didLoad could use more blackbox testing approach and just verify that the name is set propertly within 100 ms of having called find - of course this can lead to brittle tests
Ember.run.later(this, function() {
console.log('should = kyle: ', Em.get(kyle, 'firstName'));
console.log('should = kim: ', Em.get(App.kim, 'firstName'));
}, 100);
I believe that in a jasmine test you could wrap your setup code in a runs() method and use waitsFor to verify that the value has been set as expected:
waitsFor(function() {
return Em.get(kyle, 'firstName') == 'Kyle';
}, "x to be set to 5", 100);
See this JSBIN for working (non-jasmine) example:
http://jsbin.com/apurac/4/edit
See this post for tips on async testing with jasmine: http://blog.caplin.com/2012/01/17/testing-asynchronous-javascript-with-jasmine/
Also, be sure to set Ember.testing = true for all of your tests. See this SO post for detail: Is it recommended to set Ember.testing = true for unit tests?

Sencha-touch list does not show data

I'm quite new to Sencha-touch and I'm following the getting started video on the documentation website.
There is a part where the app shows blogposts in a list, but it doesn't seem to work for me.
I have the same code in the video but it doesn't work.
Ext.define('GS.view.Blog', {
extend: 'Ext.navigation.View',
xtype: 'blog',
config: {
title: 'Blog',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{title}',
store: {
autoload: true,
fields: ['title', 'link', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
}
});
Has the code/library from sencha touch changed since the video or am I doing something wrong (and what)?
Took me a little while to figure out, but it is because the store is not loading. You may ask why, as you have specified autoload to be true? The reason is because it is autoLoad (notice the capital L).
:)
please download latest sencha 2.0 framework sdk ,I also faced same issue but after downloading and using sencha-touch-all. js ,everything works fine .Probs they have updated the 2.0 with added new js files like navigation view .Open your existing sdk and check in document whether you can find Ext.View.navigation exist or not.