Ember refreshing model from current route

I have a route /search that has a component (search bar) which calls an action on the route to refresh the model. The component is used on the index route as well as the search route, something like this:

home> search bar search> search bar

The search bar component calls an action that calls the following on index:

actions: {
    goSearch: function(val) {
        this.transitionTo('search', {queryParams: {keyword: val}});
    }
}

On the search route, I have to add:

this.refresh();

in order to get the model to reload. Without it, it only changes the URL.

This works great but hitting back on the browser does not reload the model.

How should I go about this? I'm pretty sure I'm going about something wrong here.

Why does Ember parent route's actions wont get triggered?

Router

this.route('administration', function() {
  this.route('users', { path: '/' });
  this.route('users');
});

routes/administration.js

actions: {
    didTransition() {
      console.log('administration didTransition');
    }
}

routes/users.js

actions: {
    didTransition() {
      console.log('users didTransition');
    }
}

When go to url: localhost:3000/administration/users

users's didTransition got called, but administration's didTransition wont get called, can anyone help me on debugging it or the relationship between parent/ children routes?

I'd like to know which lines of code caused such? Thanks.

Don't know how to loop over grouped json in Handlebars

I have the following JSON

    {  
       "Marketing":[  
          {  
             "Id":"RequestTypeSet_{dc504202-b19f-49ec-a89b-fa96f84a1da0}",
             "Title":"Add a new event to the intranet",
             "Description":"Submit your event details for publishing to the events section of the intranet.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=dc504202-b19f-49ec-a89b-fa96f84a1da0&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=dc504202-b19f-49ec-a89b-fa96f84a1da0",
             "Slug":"Primary-Category-Marketing Alphabetical-A",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{dc504202-b19f-49ec-a89b-fa96f84a1da0}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Marketing",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Marketing",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=2beb3d49-ca57-4876-8308-8e0c55bcd556",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{a60f3558-77ff-4ff3-98ed-82b1bcda75d3}",
             "Title":"Add a news article to the intranet",
             "Description":"Submit your news story for publishing to the news section of the intranet.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=a60f3558-77ff-4ff3-98ed-82b1bcda75d3&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=a60f3558-77ff-4ff3-98ed-82b1bcda75d3",
             "Slug":"Primary-Category-Marketing Alphabetical-A",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{a60f3558-77ff-4ff3-98ed-82b1bcda75d3}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Marketing",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Marketing",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=8edcd4b3-0db3-4dd9-bc2e-42078ca7ebed",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{17f46093-b3cc-4ed9-a4f4-02f8fc1bddd8}",
             "Title":"Attend a show or conference",
             "Description":"Book your place at an event.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=17f46093-b3cc-4ed9-a4f4-02f8fc1bddd8&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=17f46093-b3cc-4ed9-a4f4-02f8fc1bddd8",
             "Slug":"Primary-Category-Marketing Alphabetical-A",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{17f46093-b3cc-4ed9-a4f4-02f8fc1bddd8}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Marketing",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Marketing",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=139ffbfc-42f9-4370-a0a5-20091d72d71f",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{9fe6834b-2151-490c-828f-cdc54939daf0}",
             "Title":"Create a competitor file",
             "Description":"Create a competitor file using the standard template.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=9fe6834b-2151-490c-828f-cdc54939daf0&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=9fe6834b-2151-490c-828f-cdc54939daf0",
             "Slug":"Primary-Category-Marketing Alphabetical-C",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{9fe6834b-2151-490c-828f-cdc54939daf0}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Marketing",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Marketing",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=b4039615-093f-43ec-ab84-387ee2588809",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{09ef0e4a-1cca-4ff2-8b82-d05ac7c34100}",
             "Title":"Create a new brochure",
             "Description":"Create a new marketing brochure using standard templates.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=09ef0e4a-1cca-4ff2-8b82-d05ac7c34100&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=09ef0e4a-1cca-4ff2-8b82-d05ac7c34100",
             "Slug":"Primary-Category-Marketing Alphabetical-C",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{09ef0e4a-1cca-4ff2-8b82-d05ac7c34100}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Marketing",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Marketing",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=4b510e2f-a222-4b84-b7ec-9589d113464b",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{bfd1552f-5a71-40d8-8833-801350a29c3e}",
             "Title":"Create a new Marketing Project",
             "Description":"Create a project site for a marketing project.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=bfd1552f-5a71-40d8-8833-801350a29c3e&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=bfd1552f-5a71-40d8-8833-801350a29c3e",
             "Slug":"Primary-Category-Marketing Alphabetical-C",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{bfd1552f-5a71-40d8-8833-801350a29c3e}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Marketing",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Marketing",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=f2d5b338-7faf-40b5-a219-f21182067417",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{e7f7e7e2-e0f5-4421-a145-6ade2bcdfa39}",
             "Title":"Launch a new product",
             "Description":"Execute the campaign launch process for a new product.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=e7f7e7e2-e0f5-4421-a145-6ade2bcdfa39&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=e7f7e7e2-e0f5-4421-a145-6ade2bcdfa39",
             "Slug":"Primary-Category-Marketing Alphabetical-L",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{e7f7e7e2-e0f5-4421-a145-6ade2bcdfa39}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Marketing",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Marketing",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=b295ef4c-e5a2-4263-b55d-bd6ce8a7fde7",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{e981649a-4719-44dc-83e8-f32db5d0ec70}",
             "Title":"New Starter Induction Process",
             "Description":"Manage an employee induction procedure.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=368ef8cd-8a0f-4ff6-bcff-b27b46ccd70d",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=874c1929-debb-40da-aa2a-e73ccb6f0468",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=e981649a-4719-44dc-83e8-f32db5d0ec70&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=e981649a-4719-44dc-83e8-f32db5d0ec70",
             "Slug":"Primary-Category-HR Primary-Category-Marketing Alphabetical-N",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{e981649a-4719-44dc-83e8-f32db5d0ec70}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"HR",
                   "TermInternalName":null,
                   "TermIconRef":null
                },
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Marketing",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Marketing",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=c00b88c5-f1aa-4c58-8759-8dda20205c92",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          }
       ],
       "Finance":[  
          {  
             "Id":"RequestTypeSet_{24fc9742-1974-4612-81d1-8de53f723fea}",
             "Title":"Business Plan",
             "Description":"Create a personal or shared business plan using the standard templates.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=24fc9742-1974-4612-81d1-8de53f723fea&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=24fc9742-1974-4612-81d1-8de53f723fea",
             "Slug":"Primary-Category-Finance Alphabetical-B",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{24fc9742-1974-4612-81d1-8de53f723fea}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Finance",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Finance",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=91728e72-ae57-48af-933c-279a3cae802d",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{63f184eb-884d-45d3-a6b6-1719816be986}",
             "Title":"Cashflow forecast",
             "Description":"Create a cashflow forecast using the standard templates",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=63f184eb-884d-45d3-a6b6-1719816be986&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=63f184eb-884d-45d3-a6b6-1719816be986",
             "Slug":"Primary-Category-Finance Alphabetical-C",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{63f184eb-884d-45d3-a6b6-1719816be986}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Finance",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Finance",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=5dd3a219-e130-438a-8814-6f9aa13c4bef",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{15a42b73-6f1f-41fd-b871-66a6e50aef6b}",
             "Title":"Expenses Claim Process",
             "Description":"Manage an employee request for an expenses claim",
             "LongDescription":"",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=22cb1d8f-7887-48dd-9b48-4a6f818c302b",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=0b260bf4-2cfb-48a0-9f05-e0c431e07fba",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=15a42b73-6f1f-41fd-b871-66a6e50aef6b&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=15a42b73-6f1f-41fd-b871-66a6e50aef6b",
             "Slug":"Primary-Category-Finance Alphabetical-E",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{15a42b73-6f1f-41fd-b871-66a6e50aef6b}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Finance",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Finance",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=d56c90b9-78a1-4c72-a6e8-0d5a77edb75c",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          }
       ],
       "Admin":[  
          {  
             "Id":"RequestTypeSet_{143840a4-54e4-445d-aa1d-393777e8993a}",
             "Title":"Create a buildings or site directory",
             "Description":"Add a new directory to the intranet for locations",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=78b0c895-9a85-4911-be80-e351a5ead2e1",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=45923135-1ed5-48bb-bd98-9a0e8d29dd6c",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=143840a4-54e4-445d-aa1d-393777e8993a&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=143840a4-54e4-445d-aa1d-393777e8993a",
             "Slug":"Primary-Category-Admin Alphabetical-C",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{143840a4-54e4-445d-aa1d-393777e8993a}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Admin",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Admin",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=b6bfa779-aed6-4ff9-843a-6ccf7ca02892",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{bf2132a0-79c8-4679-88e5-2b1ed93621a0}",
             "Title":"Create a Health and safety site",
             "Description":"Create a health and safety portal.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=78b0c895-9a85-4911-be80-e351a5ead2e1",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=45923135-1ed5-48bb-bd98-9a0e8d29dd6c",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=bf2132a0-79c8-4679-88e5-2b1ed93621a0&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=bf2132a0-79c8-4679-88e5-2b1ed93621a0",
             "Slug":"Primary-Category-Admin Alphabetical-C",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{bf2132a0-79c8-4679-88e5-2b1ed93621a0}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Admin",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Admin",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=faf7f04b-3ea3-45e0-ba04-efd7e6084d7d",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{30b5ae5a-551a-43d2-a215-b8b25b5aa627}",
             "Title":"Create a published Documents Library",
             "Description":"Enables publishing of documents to the intranet.",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=78b0c895-9a85-4911-be80-e351a5ead2e1",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=45923135-1ed5-48bb-bd98-9a0e8d29dd6c",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=30b5ae5a-551a-43d2-a215-b8b25b5aa627&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=30b5ae5a-551a-43d2-a215-b8b25b5aa627",
             "Slug":"Primary-Category-Admin Alphabetical-C",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{30b5ae5a-551a-43d2-a215-b8b25b5aa627}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Admin",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Admin",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=ebd58ee6-cadb-4018-9987-7de2464a4bf1",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          },
          {  
             "Id":"RequestTypeSet_{cc3f5b79-8ba0-4209-879f-e3eac23682cc}",
             "Title":"New Building Maintenance Issue process",
             "Description":"Manage a process to log requests for building maintenance",
             "LongDescription":"",
             "Url":"",
             "PictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=78b0c895-9a85-4911-be80-e351a5ead2e1",
             "InstancePictureUrl":"https://domainname/Json/GetAssetAsJPEG.ashx?AssetId=45923135-1ed5-48bb-bd98-9a0e8d29dd6c",
             "AddUrl":"https://domainname/default.aspx?requestTypeSetId=cc3f5b79-8ba0-4209-879f-e3eac23682cc&action=add",
             "DetailsUrl":"https://domainname/AppFeatures.aspx?requestTypeSetId=cc3f5b79-8ba0-4209-879f-e3eac23682cc",
             "Slug":"Primary-Category-Admin Alphabetical-N",
             "Created":"0001-01-01T00:00:00",
             "TypeName":"RequestTypeSet",
             "TypeId":"{cc3f5b79-8ba0-4209-879f-e3eac23682cc}",
             "Categories":[  
                {  
                   "TermSetId":"c00f1ae9-1fa3-4d39-92e1-3cf2bfe117f9",
                   "TermSetName":"Primary Category",
                   "TermName":"Admin",
                   "TermInternalName":null,
                   "TermIconRef":null
                }
             ],
             "PrimaryCategoryTerm":"Admin",
             "SecondaryCategoryTerm":"",
             "Installed":false,
             "IsNew":false,
             "IsFeatured":false,
             "IsPrivate":false,
             "RequiresApproval":false,
             "CreateUrl":"https://domainname/requestwizard.aspx?requestTypeId=4a6befbf-8943-4ac1-9054-1903c6a44d67",
             "BuildLogUrl":null,
             "Owner":null,
             "IsOwner":false,
             "ScreenshotUrl":null,
             "Verbs":[  

             ]
          }
       ]
    }

What i don't know is how i can loop through each of these seemingly named objects and display them grouped on the page using Handlebars... The anticipated result should be something like this

MARKETING -------------------

Title A Title B Title C

HR ---------------------------

Title D Title E

etc....

now regardless of the HTML that actually gets outputted i cannot figure out how to loop through these especially as the category names are variable. Ive tried using loops like this..

"",
    " : ",
"",
"",
    " | ",
"",

Can someone suggest some alternatives?

Thanks

Detecting when a hasMany property has been populated with no results

What I'm trying to do seems simple but I can't quite figure out how to do it.

I am using Emberjs 2.8.

I have the following model with an async: true property:

models/my-model.js

import DS from 'ember-data';

export default DS.Model.extend({
  childModels: DS.hasMany('otherModel', {async: true})
});

I have a component that displays one of these models:

/components/my-component.js

import Ember from 'ember';
export default Ember.Component.extend({
   theModel: // model of type my-model here
})

It's possible that my-model.childModels does not have any records. What I would like to do is in the template display a "no children found" message if that is the case but I only want to do this after the async call to the server is made and returned an empty response. So I would want the template to look something like this:

templates/components/my-component.hbs

<div>

   // display message saying there are no children

   
      // do something
   

</div>

The tricky part is knowing if the relationship has already populated from the server. I can't just check for .length == 0 because that is true before the async call is made and I don't want the DOM toggling back and forth unnecessarily. What I need is something like theModel.childModels.isLoaded but after looking through the docs I'm not sure how to accomplish this.

Could anyone suggest a way to do this? Any advice would be appreciated. Thanks much!

Display a list of items in Ember not working with each

I am trying to display a list of items in Ember.js but is not working and I don't get any error in the console. If I go to a specific element it works but I can't iterate the array.

  <h1> Forecast 16 days </h1>

  // this line works
  

  // this block doesn't work
  
     <div></div>
   

Serving a iframe content from Ember app during development

I've a public/uploads/... folder in my Ember app intended to hold all of my user's uploaded files. It includes images, videos as well as some .html files that I want to serve via an iframe in the app.

I'm trying to serve these iframes in a component:

<iframe src="/public/uploads/folder/file.html">

The development serve is presumably receiving requests for the file.html and checking the router as it looks like a normal GET request as opposed to an asset. This correctly leaves me with an error:

Uncaught UnrecognizedURLError

Is there any way to tell the ember-cli dev server that I want it to serve that particular folder?

Using async/await in test mode without Ember.run

I'm trying to use async/await functions in an Ember 2.9 project.I have this simple code :

import Route from 'ember-route';

export default Route.extend({
  async model(params) {
    const activity = await this.store.findRecord('activity', params.activity_id);

    this.set('activity', activity);

    return activity.get('courses');
  }
});

I works on dev mode but when I run a test, I have this message :

You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in a run

I understood than I can use Ember.run but using async/await become completly useless.

Is there a solution ?

Ember-cli filtering model by name, with html select options

Im getting started with emberjs, and I have connected my ember app to an API, and my models working fine. I can display the model in my template, but how can I filter them? Example, this is my model:

import DS from 'ember-data';

export default DS.Model.extend({
  placeofdamage: DS.attr('string'),
  ees: DS.attr(),
  type: DS.belongsTo('type'),
  brand: DS.belongsTo('brand')
});

How can I display ex. only BMW? With this method:

<select class="form-control" id="selectBrand">
  
    <option></option>
   
 </select>

Thank you for any further reply.

Arbitrary depth slash-delimited param value in Ember route

I have a route defined as:

Router.map(function() {
  this.route('folder', { path: '/f/:path' }, function() {} );
});

And the route itself as:

export default Ember.Route.extend({
  model(params) {
    const path = params.path;
    console.log(`path=${ path }`);
    return path;
  }
});

Currently:

http://localhost:4200/f/folder

works but

http://localhost:4200/f/folder/subfolder

throws a Uncaught UnrecognizedURLError {message: "/f/folder/subfolder", name: "UnrecognizedURLError"} since the router is expecting me to define a route at each level.

Use case is the ability for users to build an arbitrary tree of folders. Is there a way to do this?

Ember previous/next element of an array

I want to make a queue-like array, and I don't know how to move to the next element. I'm not using a for loop to iterate, because if the element of the array is deleted there is a problem.

What Can I do?

Greetings, Rafał

Ember Data persisting model with hasMany relationship and fetching json

I am creating an Ember app using Ember Data and firebase. I have two models, a parking lot and a parking space. The lot has a hasMany relationship with the parking-space.

This is the lot model:

import Ember from 'ember';
import DS from 'ember-data';

export default DS.Model.extend({

    name: DS.attr('string'),
    spaces: DS.hasMany('parking-space'),
    queue: DS.hasMany('vehicle'),
    isFull: Ember.computed('spaces',function() {
        let availableSpaces = this.get('spaces').filter((space) => {
            return space.vehicle == null;
        });
        return availableSpaces.length === 0;
    })

});

This is the parking-space model:

import Ember from 'ember';
import DS from 'ember-data';

export default DS.Model.extend({

    lot: DS.belongsTo('lot'),
    size: DS.attr('string'), // small, medium, large
    vehicle: DS.belongsTo('vehicle'),
    isEmpty: Ember.computed.empty('vehicle')

});

This is the code to add a new parking lot with a space:

//Create new lot


    let newLot = store.createRecord('lot',{
            name:'Rainmaker Parking Lot',
            spaces: [],
            queue: []
        });
        newLot.save().then(() => {
            //Create spaces
            store.createRecord('parking-space',{
                lot: newLot,
                size: 'small'
            }).save();
            return 'success';
        });

Initially, this code was inserting a record in each table in firebase but the lot table didn't have the spaces relationship. The parking-space did contain the lot relationship though. To remedy this, i modified the lot serializer:

import DS from 'ember-data';

export default DS.JSONSerializer.extend(DS.EmbeddedRecordsMixin).extend({
    attrs: {
        spaces: {
            serialize: 'records', 
            deserialize: 'records'
        }
     }
});

This is now inserting the records the way that I want them, having the spaces embedded in the lot object in firebase. However, now, when i try to retrieve the list of lots, i'm getting an error: Cannot read property 'id' of null TypeError: Cannot read property 'id' of null

This is the code i'm using to fetch the data:

let store = this.get('store');
return store.findAll('lot');

Any ideas as to why this is happening? I'm guessing it has to do with my deserializer settings. Any help would be appreciated as I am new to ember data.

Thanks,

Can I use EmberJS or other frameworks without gettting its server up?

I want a javascript framework which has features like below:

• MV*
• Well structured
• Html file as template
• Rendering fast(maybe virtual dom?)
• Combine and compatible with other plugins or libraries
• Edit on tablet IDE apps and view in browser immediately by refreshing page after I changed code

When I am at home, I use PC to develop my client-side(or front-end) applications.
When go out, I use my tablet(I have no note PC), so I want to develop my applications outside.
*There are some excellent IDE apps on the Android Market.

Before I know Ember, I use pure javascript(jquery) + css + html to develop client-side application for daily practices or work.
But recently, when I begin to learn EmberJS, a Javascript MVC framwork, I am lost.
It seems that EmberJS have to get its own server up to compile something, which generate static contents for browser rendering.
I just want to get my client-side code(files) rendering in the browser, but why I have to 'run' it as if I get apache started to serve as a php back-end.

I have googled hundreds of pages to find a solution, nothing good result discovered.
Including Angular, backbone or any other popular Javascript MV* framworks, they all must compile there applications.

Is there anyone who encontered this situation? Then any advice, please?

What is the best way to get data from multiple web services in ember js?

I'm building a website that consume data more than five different web services on different servers. And I don't know what is the best way to start the work...

how to make actions global in ember-cli

I need to have global actions doLogin that can be accessible from all of my handlebar templates

Is there a way to achieve this or probably I have to create global controllers on my ember-cli app?

using ember trying to set value in controller from route yields error

I have a controller for this route that I have created and everything else in the controller seems to work great. I am trying to pass the meta value to a variable in the controller from the route and I get a console error:

Error: Property set failed: object in path "controller" could not be found or was destroyed.

this is the relevant snippet in my route:

 model(params){                                                                                                                                                                                                          
   let someVariable = this.store.query('somePath', params);                                                                                                                                       
   someVariable.then((results) => {                                                                                                                                                                                     
       this.set('controller.totalPages', results.get('meta.page_count'))                                                                                                                                                 
   });                                                                                                                                                                                                                   
   return someVariable;                                                                                                                                                                                                 
 }

in the console error the line with the issue is this one

this.set('controller.totalPages', results.get('meta.page_count'));

The other interesting snippet is when I sort a row on my data table and make the model request again my 'totalPages' variable finally shows up as expected(with the meta value), its on the initial page load that I dont see it.

Ember: this.transitionTo works only once

I got a "Settings"-Controller for my route "/settings".

But this specific route does not exist. There are only following routes:

• /settings/account
• /settings/system

Now, i want to redirect all "/settings" requests to "/settings/account". This works fine, ... but just once.

If i click on a button with the target "/settings" i get redirected to "/settings/account". But if i click a second time on that same button, there is no redirect and it gets me on "/settings".

Here is my code:

export default Ember.Route.extend({
   redirect() {
     this.transitionTo('settings.account');         
   }
});

Why does this works just once?

ember not communicating with rails

I am following the tutorial at Ember and Rails 5 with JSON API: A Modern Bridge.

Thus, I now have a rails-api for backend and ember for front end. I started the rails server as suggested:

$ bin/rails server --binding 0.0.0.0

Started the ember server:

$ Ember s --proxy --http ://localhost:8080 --port 8081

I had to specify a port for creating the Ember server though, because I got an error saying:

Port 8080 is already in use

It seems as the rails backend work as if it is suppose to. When I visited http://localhost/something.json I get the proper json response.

In the tutorial they ask you to visit the ember frontend open ember inspector, console and enter the command :

$E.store.findAll('book');

The response I get is:

Uncaught TypeError: Cannot read property 'findAll' of undefined(…)

I am using c9 with this tutorial, not sure if it has anything to do with it though.

The question is, Why am I getting this Error?

I Am new to stackoverflow, Rails and Ember.

I have searched the question and the solutions posted did not work for me.

How to get folders/files information with ember mirage GET requests?

I am trying to make a file manager system with ember. How would you get the folder name and its contents(which could be images) from the server in order to use them in the template?

Extending Ember JSONAPIAdapter findAll for fetching json from custom url

I'm relatively new to Ember.js and I'm trying to studing how ember works and I've this problem: from an Ember.js route I will call my django api like this: this.store.findAll('MYMODEL', 'ANOTHER_MODEL_ID')

This findAll will produce an api call like /mymodel/another_model_id/ where another_model_id is a dynamic id (uuid like string).

I've tried to override the findAll method with a custom adapter (mymodel adapter) that extends the ApplicationAdapter (JSONAPIAdapter with a custom buildUrl for adding trailing slash). But my attempt failed, because in findAll overridden method I can't reach the ANOTHER_MODEL_ID parameter. I've also tried to override urlForFindAll and buildUrl methods with the same results.

What is the best method for doing this kind of things and how can I do?

Ember observer / run schedule for each time a route is loaded

I have a property in an Ember controller which has an observer. This is called when I first visit the page / route and also when I change the a dropdown that the value is bound to (as expected).

What isn't happening, is the observer being fired when I re-visit the page and the value is re-set (to the same value it was when I left the page).

The reason I need this, is that the value is used as a filter for another function and that function is called inside the observer.

Is there a way to make an observer fire even if the value is the same as it was before? Or alternatively, a sensible way to fire a function (perhaps via the run loop) from a controller, each time the controller is loaded / route visited?

Pull item after inject.service()

I have a service

export default Ember.Service.extend({
products: [],
add(product) {
   this.get('products').pushObject(product);
},

in template I call it

 <a href=" ">

and my component controller has this action

  searchProduct: Ember.inject.service(),
  ...
  ...

    add() {
  this.get('searchProduct').add(this.get('item'));
}

So when I click and move to route - products I am not able to pull what I injected. My products controller has the following.

searchProduct: inject.service(),
onSearch: function() {
  return this.get('searchProduct.products.length');
}),

What I am missing? Thank you!

Ember simple auth: how to redirect back to the last visiting route after authentication?

If user was trying to visit a /protected-route, then using ember-simple-auth after user authentication finished on /login route, how to redirect user back to the /protected-route?

There is configuration to define the route after authentication but how to accomplish something like this?

How to make a Django+Ember application run on a domain name and a certain port number

I want to run a Django+Ember website on my website on a certain port number (eg. 54321), for example: domain-name.com:54321.

I got the Django+ember application working on my domain name (without the port number specified) like domain-name.com. I can not get it working with the command:

python3 manage.py runserver domain-name.com:54321

Do I need to add anything to my /etc/httpd/conf/httpd.conf file? I know my current configuration for the httpd.conf file is correct because it works without a port number. But what am I missing to make it work on a certain port number?

Stopwatch running slow - Javascript / Ember.js

I have a stopwatch that I am running as an ember.js controller, and it is running just a tad slow, so over time it falls behind. Trying to determine how to best speed this up to time accurately. Not sure if this is being caused by browser lag, or if the system isn't happy running this process at this speed.

//timer.js
import Ember from 'ember';

export default Ember.Controller.extend({

  state: 'reset',

  tick: 0,
  seconds: 0,
  minutes: 0,
  lapTime: 0,

  isResetState: Ember.computed.equal('state', 'reset'),
  isRunState: Ember.computed.equal('state', 'run'),
  isPauseState: Ember.computed.equal('state', 'pause'),
  isLapState: Ember.computed.equal('state', 'lap'),

  incrementTick(startDate) {
    let currentDate = new Date();
    if (this.get('isRunState') || this.get('isLapState')) {
      this.incrementProperty('tick', currentDate.valueOf() - startDate.valueOf());
      Ember.run.next(this, 'incrementTick', new Date());
    }
    if (this.tick > 999) {
      this.set('tick', 0);
      this.incrementProperty('seconds', 1);
    }
    if (this.seconds > 59) {
      this.set('seconds', 0);
      this.incrementProperty('minutes', 1);
    }
  },

  actions: {
    start() {
      this.set('state', 'run');
      this.incrementTick(new Date());
    },

    stop() {
      this.set('state', 'pause');
    },

    reset() {
      this.set('state', 'reset');
      this.set('tick', 0);
      this.set('seconds', 0);
      this.set('minutes', 0);
    },

    hold() {
      this.set('lapTime', this.get('tick'));
      this.set('state', 'lap');
    },

    continue() {
      this.set('state', 'run');
    },
  },
});

How would you recommend DRYing up these links in handlebars

Here's a component:

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['config-menu'],

  newConfig: Ember.computed('config', function() {
    return (this.get('config.configId') === '');
  }),
});

And here's its template:

<ul class="tv-navigation">
  
    
      Setup
    
  
    
      Setup
    
  

  
    
      File Types
    
  
    
      File Types
    
  

  
    
      Applications
    
  
    
      Applications
    
  

  
    
      Directories
    
  
    
      Directories
    
  
</ul>

<div class="config-menu-bottom">
  
</div>

I'd love to DRY this up a bit, specifically the difference between the new-windows and windows config statements.

I tried writing some custom helpers to stringify the routes to the link-to helper, but I couldn't get it to work.

I also repeat this process for other Operating Systems (in a similar / mirror'd component).

Thanks for the advice!

Using another framework in place of Angular in the MEAN stack

I have been learning Node, Express and Mongo recently and from what I have learned about Express, it appears to handle a lot of the responsibilities which go into a "web app" parsing of your data, setting your views and specifically routing. To me I don't see the point of Angular in the stack when you have Express.

A year or two ago I tried a "Hello World" project in Angular and something the only thing I remember (which was interesting) were the custom elements and the routes (which were annoying—I didn't understand at the time why the URLS looked strange and had those "#"'s).

Am I not being fair to Angular cause I was a newb in general? Can someone explain why Angular is important to the other technologies and therefore used in the stack?

Is it possible like Vue.js or Ember.js in place of Angular in the MEAN stack?

Ember #each won't iterate over array

I'm experiencing a really weird behaviour wherein I have an Ember array that has a length, a first object, but I can't iterate over it.

I have a session object which queries the user's team members:

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.Service.extend({
  store: Ember.inject.service(),

  ...

  teamMembers: Ember.computed('token', function() {
    const promise = this.get('store').findAll('teamMember', {include: 'user,organization'});
    return DS.PromiseObject.create({ promise: promise });
  })
});

As far as I can see this is working correctly, because when I access it from inside my template, I can access the array length, and the first object:

<p>The length of the array is </p>
<p>The first entry in the array is </p>

These work perfectly, returning 2 and my own name, respectively. However, when expressed as an each statement, it returns nothing:

<ul>
  
    <li></li>
  
</ul>

The ul element is completely empty. If I have an clause, the else clause appears until the promise fulfills, and then I'm left with an empty ul element. The Ember Inspector shows all the values have been loaded correctly.

If I change the method as follows:

teamMembers: Ember.computed('token', function() {
  return [{name: 'Paul Doerwald', role: 'lead'}, {name: 'Justin Trudeau', role: 'member'}];
})

Then everything works as expected.

I'm clearly doing something wrong in the teamMembers method, presumably returning the wrong array type or something, but I can't figure out what.

Many thanks for your help!

Yield complete block in ember

I wondered how I can yield the complete block wich I pass to my component. I already found this http://ift.tt/2e0ynFn but I dont understand why there is

//my-component.hbs

  
  
   ...

Why I have to name what I want to yield? That makes no sense because I want to yield (display) the whole block wich I pass to the component, regardless what I do there.

So I tried just to use yield only:

//my-component.hbs

   ...

and use the component this way:

//myroute.hbs

   - 

This dont work, but I expected that 'car.name - car.color' will be rendered in the of the component...

Can someone explain me this, pleasse?

In Ember, how can I run common code before each component test?

When I generated my app, a module-for-acceptance.js was created in test/helpers. To specify code that I want to run before each acceptance test, I know that I can put it inside the beforeEach function in there.

How can I go about doing the same thing for component tests?

Just to make sure it is clear - I'm talking about wanting to run the same code before each test, so I don't want to put it in the beforeEach hook in each individual test file's call to moduleForComponent.

In case it helps, the code I want to run is from the ember-cli-custom-assertions addon. I just want to specify in one place that assertionInjector should be called before every component test, rather than specifying it in every file that uses a custom assertion.

Using same model from store in a component used in all routes in Ember 2.8.0

My use case: application has a header that displays current user's name. This header is the same on all pages.

User data is loaded from JSON API into the Store when user logs in.

Now, how am I supposed to access this data from Store to use it on every page?

---

1. One option is to pass it from routes:

But then I would have to use the same model in all the routes and also would be unable to use any other? How can a (supposedly reusable) component expect from me to adjust every route to its data structure?

---

2. The other option is that component always loads data from Store on its own, but this seems strongly unrecommended and actually very hard to do for me without any proper guide. I managed to discover service injection method (store: Ember.inject.service() in the component) but still can't get the component to properly display data from store in the template.

When I use:

name: () => {
    return this.store.peekRecord('user', 1).get('name');
  }

then in template renders function definition, not what it returns.

When I use:

 name: Ember.computed(() => {
    return this.store.peekRecord('user', 1).get('name');    
  })

then renders: <!---->

---

Could you please explain what is a good way to do this? Is there some "master model" defined in application.js besides models from routes? Should I really pass the same data to component in every route? Any information or suggestions will be greatly appreciated.

Ember overwritten model property not being serialised

I'm using Ember 2.4.2

app/models/product.js
export default DS.Model({
    type: attr('string'),
    color: attr('string')
});

app/models/blue-bags.js
export default Product.extend({
    type: Ember.computed('color', function() {
        if (this.get('color') === 'blue') {
            return 'bag';
        }
        return '';
    })
});

The form that these properties are used in do show that type is set to 'bag' when the color is blue, but sending this data to the server doesn't (yes color was blue when sending data to the server).

Is this the correct way to overwrite properties of a model?

Ember testing with Objects that use third party scripts

I wish to test some Ember Objects/Models which make use of a third party script for some calculations.

When I began writing these tests, I hit a problem when I started interacting with the third party scripts as they weren't loaded and I hit a bunch of undefined functions. I can get round it in this case by overriding the function in the test setup but this felt horrible.

Coming from a C# background I would normally use a mock/stub for the third party library and inject it as a depedency. During testing I would just check the mock was called correctly rather than testing the output.

I couldn't find a sensible example of this in Ember.

Would mocking the library be the most appropriate approach in Ember unit testing? and if that's the case, does anyone have a suggestion from a sensible mocking library I can use for Ember unit testing? I'm tied to an old version of Ember unfortunately for this project 1.7 (cli v 0.1.2).

The Broccoli Plugin: [UglifyWriter] failed with

I've had this error for 2 weeks now while trying to build an ember app in production. Building it in dev environment works fine. I also realized that disabling minifyJs in ember-cli-build prevents the error but then, the app gets stuck at loading in the browser, and in the console, I see another error: "could not import ember-resolver".

My guess is that this is as a result of the UglifyWriter not understanding some code somewhere.

The full error is:

Build failed. File: assets/vendor.js (95443:4) The Broccoli Plugin: [UglifyWriter] failed with: Error at new JS_Parse_Error (eval at (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), :1545:18)

at js_error (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1553:11)

at croak (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2092:9)

at token_error (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2100:9)

at unexpected (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2106:9)

at semicolon (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2126:56)

at simple_statement (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2317:73)

at eval (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2186:19)

at eval (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2139:24)

at block_ (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2432:20)

The broccoli plugin was instantiated at: at UglifyWriter.Plugin (/home/larisoft/frontend/node_modules/broccoli-plugin/index.js:7:31)

at new UglifyWriter (/home/larisoft/frontend/node_modules/broccoli-uglify-sourcemap/index.js:25:10)

at UglifyWriter (/home/larisoft/frontend/node_modules/broccoli-uglify-sourcemap/index.js:20:12)

at Class.postprocessTree (/home/larisoft/frontend/node_modules/ember-cli-uglify/index.js:15:50)

at /usr/local/lib/node_modules/ember-cli/lib/broccoli/ember-app.js:543:27
at Array.forEach (native)

at EmberApp.addonPostprocessTree (/usr/local/lib/node_modules/ember-cli/lib/broccoli/ember-app.js:541:23)

at EmberApp.toTree (/usr/local/lib/node_modules/ember-cli/lib/broccoli/ember-app.js:1667:15)

at module.exports (/home/larisoft/frontend/ember-cli-build.js:37:16)

at Class.setupBroccoliBuilder (/usr/local/lib/node_modules/ember-cli/lib/models/builder.js:70:19)

my package.json

{
"name": "hospitalrun",
"version": "0.9.12",
"description": "Ember front end for HospitalRun",
"homepage": "http://curacel.co",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "./script/build",
"start": "./script/server",
"test": "snyk test && ./script/test"
},
"repository": {
"type": "git",
"url": "git@github.com:HospitalRun/hospitalrun-frontend"
},
"engines": {
"node": ">= 0.10.0"
},
"author": "John Kleinschmidt",
"contributors": [
"Joel Worrall",
"Joel Glovier"
],
"license": "GPL-3.0",
"devDependencies": {
"body-parser": "^1.14.2",
"broccoli-asset-rev": "^2.4.1",
"broccoli-export-text": "0.0.2",
"broccoli-funnel": "^1.0.1",
"broccoli-manifest": "0.0.7",
"broccoli-merge-trees": "^1.0.0",
"broccoli-serviceworker": "0.1.0",
"ember-ajax": "2.3.2",
"ember-cli": "^2.4.1",
"ember-cli-active-link-wrapper": "0.2.0",
"ember-cli-app-version": "^1.0.0",
"ember-cli-content-security-policy": "0.5.0",
"ember-cli-dependency-checker": "^1.2.0",
"ember-cli-deprecation-workflow": "0.2.2",
"ember-cli-fake-server": "0.3.1",
"ember-cli-htmlbars": "^1.0.7",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-cli-inject-live-reload": "^1.3.1",
"ember-cli-qunit": "^2.0.0",
"ember-cli-release": "1.0.0-beta.1",
"ember-cli-sass": "^5.2.1",
"ember-cli-scss-lint": "1.0.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-data": "^2.4.0",
"ember-disable-proxy-controllers": "^1.0.1",
"ember-export-application-global": "^1.0.4",
"ember-font-awesome": "2.1.1",
"ember-i18n": "4.2.1",
"ember-load-initializers": "^0.5.0",
"ember-pouch": "^3.1.0",
"ember-rapid-forms": "1.0.0-beta4",
"ember-resolver": "^2.0.3",
"ember-select-list": "0.9.5",
"ember-simple-auth": "^1.1.0-beta.3",
"ember-simple-auth-registration": "1.0.2",
"ember-suave": "2.0.1",
"ember-truth-helpers": "1.2.0",
"ember-validations": "2.0.0-alpha.4",
"express": "^4.8.5",
"glob": "^7.0.0",
"hospitalrun-dblisteners": "0.9.2",
"hospitalrun-server-routes": "0.9.7",
"loader.js": "^4.0.7",
"nano": "6.2.0",
"request": "2.72.0"
},
"dependencies": {
"ember-cli-babel": "^5.1.5",
"ember-cli-uglify": "^1.2.0",
"ember-radio-buttons": "^4.0.1",
"ember-resolver": "^2.1.0",
"snyk": "^1.14.1",
"sw-toolbox": "^3.1.1",
"uglify-js": "^2.7.4"
},
"ember-addon": {
"paths": [
  "lib/pouch-fixtures"
]
}

}

My ember-cli-build:

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
    // Add options here
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
app.import('vendor/pouchdb-list/pouchdb-list.js');
app.import('bower_components/node-uuid/uuid.js');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/JsBarcode/CODE128.js');
app.import('bower_components/JsBarcode/JsBarcode.js');
app.import('vendor/dymo/DYMO.Label.Framework.1.2.6.js');
app.import('bower_components/moment/moment.js');
app.import('bower_components/http://ift.tt/1rsyzAh');
app.import('bower_components/pikaday/pikaday.js');
app.import('bower_components/http://ift.tt/2eIi5PI');
app.import('bower_components/idb.filesystem/src/idb.filesystem.js');
app.import('bower_components/pikaday/css/pikaday.css');
app.import('vendor/octicons/octicons/octicons.css');

app.import('bower_components/pouchdb-load/dist/pouchdb.load.js');
app.import('bower_components/pouchdb/dist/pouchdb.memory.js');

return app.toTree();

};

Ember.js FindRecord Invalid Id

I'm trying to see if a entry exists on an API call that returns {data:null} if the entry does not exist. When the call resolves I get the following error:

Cannot read property 'constructor' of null

What I want to do is if the entry doesn't exist I want to create it. If it does exist I want to update the model. Not sure what I'm doing wrong.

Also I created the API to fit JSON API standards so I can change the response of the server as well.

EmberJS 2 route dynamic segment in not nested routes undefined

Really new to ember and trying to setup basic (in my mind) routes.

I have calendars resource and I want to display individual calendars.

My app/router.js has the following:

this.route('calendar', {path: 'calendars/:calendar_id'}, function () {
    this.route('show');
    this.route('edit');
});
this.route('calendars', function(){
    this.route('create');
});

Folders are as following:

app/routes: [
  calendars: [create, index],
  calendar: [edit, show]
]
app/templates: [
  calendars: [create, index]
  calendar: [edit, show]
]

In app/routes/calendar/show.js:

import Ember from 'ember';
export default Ember.Route.extend({
    model(params) {
        return this.store.findRecord('calendar', params.calendar_id);
    }
});

Problems start when I go to http://SERVER/calendars/5/show (5 is a :calendar_id part, SERVER is what hosts ember app) :

• when I log params - they are undefined
• In dev tools I see that Ember somehow makes a POST request to my server as http://SERVER/calendars/5 (a :calendar_id part, SERVER is on same domain and where my back-end resides).
• This happens regardless if I comment out model() function in app/routes/calendar/show.js file.
• Apparently Ember knows what calendar_id to use for that request.

• But I don't know where that call to the server happens:

  • If I comment out model(){} altogether, my template renders model record (the calendar record that Ember fetches).
  • If I on the other hand try to log params in model() and I comment out this.store.findRecord part out, the model is not set and params are undefined.

• I thought at first that it is my DS.RESTAdapter since I have defined updateRecord changes to fake PUT request (my server does not allow that), but I commented out the whole file and it still does this query.

• I've cleaned both dist/, tmp/, upgraded to 2.9.0, but it does the same thing.
• I have no controllers defined

How does Ember make POST request if model() hook is missing from route, I have no controllers difined. Also how do I fix it so that it works? ;p

Link interpolation i18n

I use ember-i18n to handle multiples langages in my project, and I need to insert a link inside a translation (with interpolation).

I know i can use a dirty solution which is cropping my text and then concatenate it with a link tag but I'm looking for something cleaner.

Any idea ?

Ember data JSONAPIAdapter: fetch nested resources

I'm trying to get Ember Data's JSONAPIAdapter to work with nested resources. For the server part django-rest-framework-json-api is used.

My (simplified) ember models:

case.js

export default Model.extend({
  firstName: attr('string'),
  lastName: attr('string'),
  comments: hasMany('comment'),
})

comment.js

export default Model.extend({
  text: attr('string'),
  case: belongsTo('case'),
})

The server's response for /api/v1/cases/4 looks like this:

{
  "data": [
    {
      "type": "cases",
      "id": "4",
      "attributes": {
         "first-name": "Hans",
         "last-name": "Peter",
      },
      "relationships": {
        "comments": {
          "meta": {
            "count": 1
          },
          "data": [
            {
              "type": "comments",
              "id": "5"
            }
          ],
          "links": {
            "related": "http://localhost:8000/api/v1/cases/4/comments"
          }
        }
      }
    }
  ]
}

Now, if i understand Ember Data and the JSON-API spec correctly, ember should request /api/v1/cases/4/comments when i reference the comments. Instead, it requests /api/v1/comments/5, which obviously returns a 404.

My questions in summary:

• Does the server response comply to the JSON-API spec?
• How do i get ember to respect the nested route?

I'm using ember v2.8.

Bonus question: I face the same problem for creating a new comment - how do i get ember to POST to /case/4/comments instead of /comments?

Avoid showing new model itself

I have got a form to create a new Model called Route. In the form is a select field, called takeover, showing all Routes and the user can select one to get an relationship to the selected Route. My problem is that the newly created Route is even selectable in the select field, because I simply return 'this.get('store').findAll('routes');'. How can I remove the new Model from the selection, because it is not possible to create a relationship to itself

What is the Rails part in an hybrid Rails+Ember App

Since we use ember's CRUD in an hybrid, what is Rails used for? Validation's on ember side, routing in ember side, CRUD in ember side.

What is Rails have to do with all this? Why do people couple them? And lastly, is there any framework that will let me keep the logic in rails and will only take care of the views ?

Ember opposite of positionalParams

In an Ember Component it is possible to define a positionalParams property so that parameters passed as positional params become available as properties. E.g:

let MyComponent = Ember.Component.extend;
MyComponent.reopenClass({
  positionalParams: ['name', 'age']
});

when it is invoked: the property name has the value John and de property age has the value 38.

I would like to have the opposite behavior but I cannot find whether this is possible. The behavior I'm looking for is like following:

Instead of passing a number of positional params () I would like to pass an array property () because it can be of a dynamic size.

I'm not only looking for this behavior at components, but also helpers: should become . The helper should get the same params-array as first argument in both cases.

Rails back-end + Ember front-end

I want to use ember+rails hybrid.I have made a toy app, which using rails seeds for now.But i want some CRUD action.I know both frameworks have their own CRUD but i want to use rails CRUD.

Can i use rails routesi and link_to helpers, instead of this below;

<a href>Home</a>
<a href>About</a>
<a href>Contact</a>

How do i do this?

And as for forms, do they have to be html forms? (can i use simple_form or form_for?)

Can i use ember only for replacement for rails views? (i mean, without logic, i want to keep all logic in rails.)

Plese inform me.

Having 2 website on the same server using ember-simple-auth logs both out

I currently have 2 of the same site (one for production and the other is a development version) on one server and I have an issue with the ember-simple-auth for both of the site. Whenever I log in on one of the site, it works perfectly fine, the session works and everything works as expected. However, when I have both of the site open on different tabs (on the same browser and same window) and I try logging on one of them, they both log out creating an error in the console saying:

"The authenticator "authenticator:oauth2" rejected to restore the session - invalidating…"

On the other hand, when I have one of the site open on a regular browser and the other one on the same browser but in incognito (no caches), they both work perfectly fine (e.g. none of them logs out and everything works as expectedly). It works perfectly fine too if I open one site in one browser (such as Chrome) and the other site in a different browser (such as Safari).

My first guess is that these 2 different site has the same session used in cache but I could be wrong. If you have any idea on why this occur or you have a solution, please let me know.

Is there some way I can get ember to build only the styles?

I'm creating a bunch of themes by passing variables into ember-cli. Is there some reasonable way for me to configure Ember to only do the CSS build?

Emberjs - looping through an array 'each', but performing a different action every three objects

When using bootstrap + emberjs, I want to create a new <div class="row"> for every three objects in an array.

This is how I solved the same problem using Ruby+Rails.

<% @movies.in_groups_of(3) do |group| %>
    <div class="row">
    <% group.each do |movie| %>
         <div class="col-md-4">
             <h3><%= movie.title</h3>
             <%= image_tag(movie.thumb_url) %>
         </div>
     <% end %>
     </div>
<% end %>

I'm not sure (and am looking for help) on what "the ember way" of dealing with this is, obviously the below code results in a new row each time this loop completes - which is not the desired outcome.

  <div class="row">
    <div class="col-md-4">
      <h3></h3>
      <strong>Category Name</strong>
      <img width="100%" src="" alt="" />
    </div>
  </div>

Assistance greatly appreciated - thanks!

Ember's model.save is not a function from the action but is from a template

I have a button in a template with an action:

// template
<button class="btn btn-danger" >

And its route:

// route
actions: {
  eventCancel(model) {
    model.set('action', 'cancel');
    model.save().then(function () {
      this.transitionTo('event', model.id);
    }.bind(this));
  }
}

I can do from the template and see the function is there.

Doing the same thing from the action's parameter results in undefined.

They have the same identifier. In my case __ember1477392164713: "ember697" is present in the log message when logged from the template or the action. So it would seem to be the exact same object. It just loses its ability to be saved somehow.

What's going on here? I thought passing the model from the template to the action should work?

I also tried getting the model with this.controller.get('model'); inside the action to no avail.

How can i do something like change elements only for the selected row by EmberJs?

I just want to know how can i change selected row details in my table by Emberjs.

Now i have normal html table that looks like this.

So when i click Edit row it will become like this.

How can i make this happended in side Emberjs?

Thanks!

Hasmany relationship in ember with array id

I have some trouble with has_many relationship in ember, let's say I want to retrieve the comments attached to a post, I can easily do it if my Postgres schema looks like this:

posts:

{
  id: 1,
  comments: [1, 2, 3]
}

comments:

{
  id: 3,
  post_id: 1
}

But what I want is to get rid of the "comments" in posts table, like:

posts:

{
  id: 1
}

comments

{
  id: 3,
  post_id: 1
}

So far I haven't found anything that can help me even if it doesn't seem hard :(

I would be glad if someone can help me do that :)

How to know the error codes for Bookshelf.js so that i can handle any type of error ? Iam using ember.js too in my project

How to know the error codes for Bookshelf.js? so that i can handle any type of error ? Iam using ember.js too in my project (node.js+ember.js+bookshelf.js)

how to get input parameters on template tag on controllers

I have following on my ember template

"   class="form-control" insert-newline="submitOrder"  value=tracking}}

And my controller is below

 export default Ember.Controller.extend({
    actions: {
      submitOrder: function(value, event) {}
 });

How can I access id inside submitOrder actions?

ember data pluralizing nouns when fetching data from REST

I am having a Dynamic routing page at http://localhost:4200/organizer/{organizer-id} which fetches data from a RESTful JSONAPI adapter.

organizer.js:

export default Ember.Route.extend({
  model: function(params) {
    return this.get('store').findRecord('organizer', params.organizer_id);
  }
});

ember data plurarizes organizer into organizers when fetching data from the REST adapter. From the docs it seems to be the intended behavior, however from a RESTful perspective, is it correct?

/organizers should give me a list of organizers?

/organizer/{organizer-id} should give me 1 organizer?

Expected:

http://localhost:9300/apis/organizer/organizer-b547259c-ece2-4d58-8d4b-13a2dd448e1a

Actual:

http://localhost:9300/apis/organizers/organizer-b547259c-ece2-4d58-8d4b-13a2dd448e1a

EmberJs - Linking to mutiple dynamic routes, mutiple nested levels

To link to record you can use something like this in your route:

  this.route('clients', function() {
      this.route('all',function(){
          this.route('view',{
              path:'view/:client_id'
          });
      });
  });

So if the user were to go to: /clients/all/view/-KdFmDwwWAHDFjjaG6aA

They could view that client record.

Is it possible to go deeper? For example: /clients/all/view/-KdFmDwwWAHDFjjaG6aA/property/-KdFeTqqUIKLFqbaP9aB

?

That way you could be looking at a specific client record and then launch an overlay for example to show the specifics on a single property that client has for sale?

I'm not sure how to structure the router or the link-to to accomplish this?

Control the order of ember promise resolution?

I've been following the tutorial, using ember 2.9.1, node 6.9.1, chrome 53.0.2785.143 and OS/X 10.11.6.

When I create the component described here: http://ift.tt/2eFbMgH

I end up with a race condition. If I enter the character p into the input and very rapidly hit backspace, I end up with the models filtered by the character p but no input in the text field.

Some console logging suggests this is happening because the second promise (which returns all the models, since the input is empty) is resolving first, and the first promise (returning the filtered models) resolves second.

Is there anything that can be done about this?

Ember component doesn't display async data at first

Total Ember beginner here - this question might be obvious.

I have the route /bets with a component to display bets filtered by future dates. The route template also has a button to route /bets/new where the user can add new bets. Each bet has a hasMany relationship to User.

My problem is that my bets doesn't show up in the component even though I can see in Ember Inspector that the data is loaded. It does show up when I add a new bet through the form in /bets/new though.

My reasoning was that since the data is async, it doesn't load until I request it by pushing a new bet, but I can't get my head around it.

bets.hbs

 
    New bet
 

 
 

bets.js

import Ember from 'ember';

export default Ember.Route.extend({

  model () {
    return this.store.findRecord('user', this.get('session.currentUser.uid'));
  }

});

upcoming-bets.hbs

<h2>Upcoming bets:</h2>



<div class="bet">
    <h3> vs </h3>
    <p>
      <small></small>
    </p>
    <p>
      Bet type: 
    </p>
    <p>
      Bet: 
    </p>
    <p>
      Stake: 
    </p>
    <p>
      User: 
    </p>
    <button class="btn btn-danger" ></button>
</div>



<p>
  You don't have any upcoming bets. Maybe add one?
</p>

upcoming-bets.js

import Ember from 'ember';

export default Ember.Component.extend({

  upcomingBets: function() {

    var today = new Date();
    today.setHours(0,0,0,0);

    return this.get('bets').filter(function(bet){
      return bet.get('eventDate') > today;
    });
  }.property('bets.@each'),

  actions: {
    deleteBet: function(bet){
      bet.destroyRecord();
    }
  }

});

new.js

import Ember from 'ember';

export default Ember.Controller.extend({

  actions: {

    addBet() {
      var newBet = this.store.createRecord('bet', {
        created: new Date(),
        sport: this.get('selectedSport.name'),
        league: this.get('league'),
        homeTeam: this.get('homeTeam'),
        awayTeam: this.get('awayTeam'),
        type: this.get('type'),
        bet: this.get('bet'),
        stake: this.get('stake'),
        odds: this.get('odds'),
        eventDate: this.get('eventDate'),
      });

      // Save user as well as bet
      var user = this.get('user');
      user.get('bets').addObject(newBet);

      newBet.save().then(function(){
        return user.save();
      });
    }
  }

});

I appreciate any pointers. Thank you!

Ember: QueryParams are loading slowly

I am currently having an issue where my queryParams are loading slowly, and my properties are being computed before the queryParams have been set.

I have a controller that looks something like this:

queryParams: { travelAgentUserToken: "ta-token" },

travelAgentUserToken: "",

session: function () {

    console.log("---- session", this.get("travelAgentUserToken"));

    return DS.PromiseObject.create({
        promise: this.store.queryRecord("session", {token: this.get("userToken") || this.get("travelAgentUserToken")})
    });

}.property("travelAgentUserToken"),

When my page is loaded with the code above, my console.log will be triggered the first time with a value (corresponding to the travelAgentUserToken query param) of "", then the actual value will be loaded momentarily after.

In my mind this should not be happening, and the queryParams should be loaded before anything is computed. Has anyone else had this issue?

Pass an array of records to set a hasMany relationship without the records in EmberJS?

I'm saving a new 'owner' record and have the following fields:

export default Model.extend({
    "owner": attr('string'),
    "cars": DS.hasMany('car',{async: true}),
});

In this example, I have a cars field. This would relate to the car model and show how many cars the owner has in his collection. However, let us say no cars exist, or I want to add the owner record without adding cars he owns... I get this error:

"Assertion Failed: You must pass an array of records to set a hasMany relationship"

How would I got about saving this record, so I can add cars or possibly keep with no cars?

ember build is not setting the correct rootUrl

Messing around with deploying, and I'm going to need to put the app outside the root url of the server. Based on this answer all I need to do is change the environment.js file to look like this.

module.exports = function(environment) {
    var ENV = {
        modulePrefix: 'ember-drupal',
        environment: environment,
        rootURL: '/',
        locationType: 'auto'
    };

    if (environment === 'production') {
        ENV.rootUrl = '/myApp/';
        ENV.locationType = 'hash';
    }
    return ENV;
};

So when I run

ember build --environment=production

I expect it to set the rootUrl to be /myApp/, yet when I load up localhost/myApp/ it gives me 404 saying that it's still looking for /assets/ instead of /myApp/assets.

Two interesting notes.

1. If I change the default rootUrl to /myApp/, it works.
2. The source code has a meta tag called "ember-drupal/config/environment". The content of the meta tag is json of my environment variables.

The 'ember build' command spits out this:

{
"modulePrefix":"ember-drupal",
"environment":"development",
"rootURL":"/",
"locationType":"auto",
"exportApplicationGlobal":true
}

And the 'ember build --environment=production' spits out this:

{
"modulePrefix":"ember-drupal",
"environment":"production",
"rootURL":"/",
"locationType":"hash",
"rootUrl":"/myApp/",
"exportApplicationGlobal":false
}

So it's setting the locationType correctly, but setting the rootUrl twice.

Ember render without or empty layout

Good day

I'm trying to render a view template without layout or into empty layout without success.

Here is my code in the route:

renderTemplate: function(controller, model){
    this.render('my_view_template', {// the template to render, referenced by name
        into: 'other_layout', // the template to render into, referenced by name
        outlet: 'main' // the outlet inside `options.template` to render into.
    })
}

I get an error message: other_layout cannot be found.

other_layout.hbs is into templates folder and it has:

any idea?

Thanks.

Twilio Rooms API not working as expected

I'm building a video conference application, previously which was using Twilio conversation API. As per recent updates from Twilio,I tried the Rooms API with help of twilio's quick start app. I faced problem in fetching and attaching the remote participants media tracks. Here with I have attached the code sample, the Twilio library I'm using and ruby code for generating tokens.

Note: I use Ember JS for front end and ROR for back end.

JavaScript code:

var twilioVideo = Twilio.Video;
Ember.debug('Initiaizing Video Client for ' + data.identity);
var twilioClient = new twilioVideo.Client(data.video_token);
Ember.debug('Initiaizing LocalMedia for ' + data.identity);
var localMedia = new twilioVideo.LocalMedia();
twilioVideo.getUserMedia().then(function(mediaStream){
  localMedia.addStream(mediaStream);
  localMedia.attach('#video-local');
  twilioClient.connect({to: 'randomRoomname'}). then(function(activeRoom){
    Ember.debug('Connected to the Room: ' + activeRoom.name);
    activeRoom.participants.forEach(function(participant) {
      participant.media.attach('div#remote-media');
      Ember.debug("Already in activeRoom: '" + participant.identity + "'");
    });
    activeRoom.once('participantConnected', function(participant){
      participant.media.attach('div#remote-media');
      Ember.debug('Participant '+participant.identity+' is connected');
    });
    activeRoom.once('participantDisconnected', function(participant){
      Ember.debug('Participant '+participant.identity+' is disconnected');
    });
  }, function(error) {
    Ember.debug('Failed to connect to room as ' + error);
  });
});

Twilio Video library taken from this CDN.

Ruby code:

video_token = Twilio::Util::AccessToken.new(ENV['TWILIO_ACCOUNT_SID'], ENV['TWILIO_API_KEY'], ENV['TWILIO_API_SECRET'], 3600, identity)}

grant = Twilio::Util::AccessToken::VideoGrant.new
grant.configuration_profile_sid = ENV['TWILIO_CONFIGURATION_SID']
video_token.add_grant grant

json :identity => identity, :video_token => video_token.to_jwt

Twilio-ruby gem used: version 4.13.0.

PS: I use action cable to share messages between participants for some other features as my requirements.

Am I missing any other configurations or Do I need to enable anything from twilio side? I'm using this tutorial.

Why javascript technologies uses command line

why Javascript technologies like typescript,Coffee Script,Ember.js,Nodejs,angular.js uses command-line to download this through it

Emberjs: error when loading data from remote API

I am working with EmberJs and I have a problem with JSON adapter, as you can see below:

export default DS.JSONAPIAdapter.extend({
  host: 'url',
  headers: {
    'X-Mashape-Key': 'key'
  }
});

I have adapter with a basic configuration and also a route with

export default Ember.Route.extend({
  model() {
    debugger
    return this.store.findAll('player');
  }
});

and model player

export default DS.Model.extend({
  fullname: DS.attr('string'),
  nationality: DS.attr('string'),
  number: DS.attr('number'),
  position: DS.attr('number'),
  goals: DS.attr('number'),
});

and I received under console such as errors:

ember.debug.js:30287 Error while processing route: index Ember Data Request GET https://... returned a 404

and

ember.debug.js:19157 Error: Ember Data Request GET https://... returned a 404 Payload (application/json)

I am not sure what I am doing wrong. I was trying to check what kind of data I received but without results.

Changing array on template doesn't update on route/controller

I need multiple input fields to fill an array of ints.

This is my template and route:

// Route
import Ember from 'ember';

export default Ember.Route.extend({
  setupController() {
    this.controller.set('myArray', [1]);
    // ...
  }
}

// Template
<!-- ... -->

  


<p>Length: </p>
<p>First item: </p>

When the template is first rendered, the input field has value 1 and First item also shows 1, but when I change the input value to something else, First item still shows 1.

I only managed to get this to work if I replace the array of ints with an array of objects, e.g. this.controller.set('myArray', [{value: 1}] and then use the property value on the template, but I'd rather avoid this if I can. Is it possible to do this with an array of ints?

In ember, how to get notified each time new partial loaded after the route change

i want to manipulate the DOM which is generated/attached after the route changes in ember. so i need to call a hook method after the page render successfully (for all partial), it is not specific to components.just want to get notified each time the new partial loaded successfully after the route change? anyone can help me?

Ember.js 2.7 does not build using yarn - does build using npm

Versions:

• ember.js 2.7, ember-data 2.7
• ember-cli 2.9.1 // true for ember-cli 2.7 as well
• node 6.9.1, npm 3.10.9 // true for node 4.4.4 and npm 2.15.5 as well
• Mac El Capitan

Steps to reproduce:

• rm -Rf node_modules bower_components
• yarn
• bower install
• ember s or ember build

Symptoms:

---

Build failed. The Broccoli Plugin:

[Funnel: Funnel vendor/ember-cli-qunit/images /assets include:2] failed with:

Error: ENOENT: no such file or directory, scandir '/Users/somePath/client/tmp/funnel-input_base_path-http://ift.tt/2eJAvQB' at Error (native) at Object.fs.readdirSync (fs.js:951:18) at FSMonitor._measure (/Users/somePath/client/node_modules/heimdalljs-fs-monitor/index.js:66:21) at Object.readdirSync (/Users/somePath/client/node_modules/heimdalljs-fs-monitor/index.js:82:30) at _walkSync (/Users/somePath/client/node_modules/broccoli-funnel/node_modules/walk-sync/index.js:64:18) at Function.entries (/Users/somePath/client/node_modules/broccoli-funnel/node_modules/walk-sync/index.js:40:10) at Funnel.processFilters (/Users/somePath/client/node_modules/broccoli-funnel/index.js:264:26) at Funnel.build (/Users/somePath/client/node_modules/broccoli-funnel/index.js:202:10) at /Users/somePath/client/node_modules/broccoli-plugin/read_compat.js:61:34 at tryCatch (/Users/somePath/client/node_modules/rsvp/dist/rsvp.js:538:12)

The broccoli plugin was instantiated at: at Funnel.Plugin (/Users/somePath/client/node_modules/broccoli-plugin/index.js:7:31) at new Funnel (/Users/somePath/client/node_modules/broccoli-funnel/index.js:56:10) at /Users/somePath/client/node_modules/ember-cli/lib/broccoli/ember-app.js:1474:12 at Array.map (native) at EmberApp.otherAssets (/Users/somePath/client/node_modules/ember-cli/lib/broccoli/ember-app.js:1468:61) at EmberApp.toArray (/Users/somePath/client/node_modules/ember-cli/lib/broccoli/ember-app.js:1642:10) at EmberApp.toTree (/Users/somePath/client/node_modules/ember-cli/lib/broccoli/ember-app.js:1662:30) at module.exports (/Users/somePath/client/ember-cli-build.js:67:16) at CoreObject.setupBroccoliBuilder (/Users/somePath/client/node_modules/ember-cli/lib/models/builder.js:70:19) at CoreObject.init (/Users/somePath/client/node_modules/ember-cli/lib/models/builder.js:50:10)

---

If I do an npm install after yarn, the console output is:

---

npm WARN prefer global jshint@2.9.4 should be installed with -g npm WARN prefer global marked@0.3.6 should be installed with -g npm WARN prefer global node-gyp@3.3.1 should be installed with -g

node-sass@3.10.1 install /Users/somePath/client/node_modules/node-sass node scripts/install.js

node-sass@3.10.1 postinstall /Users/somePath/client/node_modules/node-sass node scripts/build.js

"/Users/somePath/client/node_modules/node-sass/vendor/darwin-x64-46/binding.node" exists. testing binary. Binary is fine; exiting. npm WARN prefer global npm@3.10.9 should be installed with -g

spawn-sync@1.0.15 postinstall /Users/somePathclient/node_modules/spawn-sync node postinstall

auth0-ember-simple-auth@1.1.0 node_modules/auth0-ember-simple-auth

---

If I rm -Rf node_modules and do a standard npm install, the build works without errors like all the time before.

Any ideas?

Clueless with ember-cli-postcss

I'm trying to do an ember build that uses autoprefixer. The problem that I'm having is that what normally outputs to 'assets/application-name.css' now outputs to 'app/styles/app.css' and I would like to output it to 'assets/application-name.css'.

I have tried adding the outputPaths option, but that doesn't seem to have any effect.

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var Funnel = require('broccoli-funnel');
var autoprefixer = require('autoprefixer');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    outputPaths: {
      app: {
        css: {
          'app': 'assets/application-name.css'
        }
      }
    },
    postcssOptions: {
      compile: {
        enabled: false
      },
      filter: {
        enabled: true,
        plugins: [
          {
            module: autoprefixer,
            options: {
              browsers: ['last 2 version']
            }
          }
        ]
      }
    }
  });
...

Connecting ActionCable to different host

I'm running a rails 5 app as a backend server, and an ember application for a front-end application. They are two separate applications hosted on two different domains - say, backend.dev and frontend.dev

The rails application has a simple connection class found at app/channels/application_cable/connection.rb that looks like the following:

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    def connect
      Rails.logger.debug("env: #{env.inspect}")
      Rails.logger.info("cookies.signed: #{cookies.signed.inspect}")
    end
  end
end

I have a simple base channel class at app/channels/application_cable/channel.rb with the following:

module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end

And a single implementation of that class at app/channels/events_channel.rb:

class EventsChannel < ApplicationCable::Channel
  def subscribed
    Rails.logger.debug("env: #{env.inspect}")
    Rails.logger.info("cookies.signed: #{cookies.signed.inspect}")
    stream_from 'events'
  end
end

On the ember side of things, I'm using the actioncable js package from http://ift.tt/2f5VhwM. I've setup my consumer in my frontend by extending the controller class with the following:

cableService: Ember.inject.service('cable'),

setupConsumer: Ember.on('init', function() {
  let service = this.get('cableService');
  let consumer = service.createConsumer(`ws://backend.dev`);
  let channel = 'EventsChannel';

  consumer.subscriptions.create(channel, {
    disconnected() {
      Ember.debug(`${channel}#disconnected`);
    },

    connected() {
      Ember.debug(`${channel}#connected`);
    },

I'm fairly sure that my consumer is setup correctly, as I'm seeing some debug output when I get the following output to my js console:

DEBUG: EventsChannel#disconnected

However, I'm also seeing an odd error in the console as well:

WebSocket connection to 'ws://backend.dev/' failed: Error during WebSocket handshake: Unexpected response code: 200

I'm not sure what to make of the response code error here, and there's absolutely nothing being logged in my rails app. Is there anything additional that I need to setup to have actioncable work across domains? Any idea of what the 200 response code means here?

Extend ember class on condition

Is it possible to extend Ember class on condition? Something like this:

A.reopen({
  if (condition) {
    init: function() {
      this.super();
      // some functionality
    }.on('didInsertElement');
  }
})

EmberJs : #each loop not detecting the array defined in the component

This might seem simple, but i am missing something here. Please help me out.

in the component's JS file -

weekShorts: computed(function() {
  return new Array('S', 'M', 'T', 'W', 'T', 'F', 'S');
}),

and then in hbs file -

  <td>  </td>

  <td>
    No items in days
  </td>

The output is always "No items in days".

Although, just printing anywhere else, displays

S,M,T,W,T,F,S

Why is the #each loop not executing the loop over the array at all?