Highlight row is not getting disappear after I click the next table row

I need to create background as yellow while selecting the gear icon for the menu option in the table row, I have tried the below code for highlighting the table row,

var view = Core.view.Menu.create({
    model: model,
    menuContext: { ibmm: ibmm },
    anchor: this.$(),
    highlight: this.$().parents('tr:first').css('background-color','yellow')
});
view.show();

While selecting the menu from the table row, the background color is coming well. But when I move for the next table row, the past table row color is still in yellow color, not getting disappear. Can anybody suggest me code for this. I’m using Ember 1.4.0.

How do I backgroundReload in multiple stages in Ember?

I'm fetching a list of records, say posts, without relationships. When I pick a single post, I would like to see the post immediately, and background-load its relationships.

This is possible like so:

this.store.findRecord('posts', params.id, {
    reload: false,
    backgroundReload: true,

Once the relationships are loaded, the view is automatically updated.

However, some relationships are complex and take some time to load. They become relevant after scrolling. There is one hasMany relationship that is important for the initial pageview. And their relationships are also important, but I prefer to defer them too.

So, is it possible to do the following points in order when clicking on a single post?

• Open post directly from cache (reload: false)
• Background-reload including one relationship excluding the relationship's relationships
  • Background-reload relationship including relationship's relationships
• Background-reload including all relationships

E.g. after the initial template is drawn using the cached model, 3 more updates will happen.

Need to create the background color as yellow in the table row while I'm clicking on the menu

I need to create background as yellow while selecting the gear icon for the menu in the table row, I have tried the below code for highlighting the table row

                                var view = Core.view.Menu.create({
                                    model: model,
                                    menuContext: { lmdd: lmdd },
                                    anchor: this.$(),
                                    highlight: this.$().parents('tr:first')
                                });
                                view.show();

In that lmdd is a java service, it will show the menu list while click on the gear icon. By using the highlight only I need to do this operation.

Please suggest answers from this standpoint. thanks in advance.

How to create one class name in element while click on the table row

I need to include one class name inside the tag on clicking the corresponding row on the table. because I need to highlight the row while click on the corresponding row by using css. When I click on the row, its not showing any class name in the console. because of that I can't able to create the row highlight.

Here is the code I'm using:

        click: function () {
                var test = this.HeaderRowView.tableView.model;
                 $('.content-data').off('contextmenu');
                 $('.content-data').contextmenu(function(e){
                    if(e.which == 3){
                        var ibmm = this.hovered;
                        var model = Core.model.Menu.create({
                            loadState: 'done',
                            content: [
                                Core.model.Menu.Item.create({
                                    label: 'Delete IBMM Definition',
                                    icon: 'delete',
                                    invoke: function () {
                                        var fmtLabel = ibmm.label ? (ibmm.label + " ("+ibmm.name+")") : ibmm.name;
                                        Core.confirm(
                                            "Delete IBMM Definition",
                                            "Are you sure you want to delete the IBMM Definition for " + fmtLabel + "?",
                                            "Delete",
                                            "Cancel"
                                        ).then(function () {
                                            Core.services({
                                                service: 'ibmm',
                                                type: 'delete',
                                                data: {
                                                    name: ibmm.name
                                                }
                                            }).done(function () {
                                                test.reload();
                                                Core.notify({
                                                    title:"Delete IBMM Definition",
                                                    message: "IBMM Definition " + fmtLabel + " deleted"
                                                });
                                            });
                                        });
                                    }
                                })
                            ]
                        });
                        var view = Core.view.Menu.create({
                            model: model,
                            menuContext: { ibmm: ibmm },
                        });
                        document.styleSheets[1].cssRules["1538"].style.display ="none"
                        view.show();
                        Ember.run.next(view, (function () {
                            var X = e.clientX;
                            var Y = e.clientY;
                            if(document.getElementsByClassName('context-menu-items')[0]) {
                                document.getElementsByClassName('context-menu-items')[0].style.left = X+'px';
                                document.getElementsByClassName('context-menu-items')[0].style.top = Y+'px';
                                document.styleSheets[1].cssRules["1538"].style.display =""
                                document.getElementsByClassName('context-menu-items')[0].style.display = "block"
                            } else {
                                view.remove()
                                document.styleSheets[1].cssRules["1538"].style.display =""
                                return false;
                            }
                        }).bind(this));
                        return false;
                    }
                    }.bind(this))
            }

Here is the click option with the corresponding service code's. Please suggest me code from this. thanks in advance.

How to trim data before set using Ember.set

As a newbie to Ember.

I have an Object that has to be trimmed for white-spaces before updating/assigning with ember.set.

I know it can be done with using this.set(/**/).trim(). But just set() is not supporting trim(). And I have been told this.set() is not a best way than compared to just set()

set(Object, Key, NewValue) is how my syntax is.

Googlebot refuses to render more than index.html in Ember app

I am using Ember 3.0.0 to create a booking site. Title and meta tags are handled via ember-cli-meta-tags, and seem to be rendered correctly when pages are opened in the web browser.

However, Googlebot refuses to render the app normally. Whatever I do, it just renders a blank index.html page. We have tried to shorten the time of loading the model, but even non-dynamic pages (without Ember Data requests in the model) are not rendered.

Here is an example from https://www.muntra.se/tandblekning:

import { schedule } from '@ember/runloop';
import { get, set } from '@ember/object';
import ENV from '../config/environment';
import Route from '@ember/routing/route';

export default Route.extend({
  title: 'Tandblekning i praktiken: Allt du behöver veta',

  patientPortal: ENV.APP.patientPortal,

  headTags: function() {
        return [
            {
                type: 'link',
                tagId: 'canonical-link',
                attrs: {
                    rel: 'canonical',
                    href: get(this, 'patientPortal') + '/tandblekning'
                }
            }, {
                type: 'meta',
                tagId: 'meta-description-tag',
                attrs: {
                    name: 'description',
                    content: 'Konkret och praktisk guide för tandblekning som gör att du sparar pengar, minskar risk för skador och får vitare tänder.'
                }
            }
        ];
    },

  titleToken: function() {
        return 'Tandblekning i praktiken: Allt du behöver veta';
    },

  setupController(controller, model) {
    this._super(controller, model);
    schedule('afterRender', this, function() {
      set(controller, 'after_render', true);
    });
  }
});

When testing this page on http://www.botsimulator.com/, I get the same rendering as on index.html. And also in Google Search results when googling "tandblekning site:muntra.se".

Ember loading state blocks location.href history updating

When some.route is waiting for slow-model, you can have a some.route-loading loading state to show some kitties while waiting.

In this case it makes sense to have some.route-error too, so you can show a sad face when the payload breaks things.

However, when I click on a link-to to some/route, the location href in the address bar is not updated until the loading completes successfully.

I don't know if this is by design, but I would like to be able to navigate back with the browser history on error.

In other words: Can I have the location href in the address bar update before rather than after the loading state appears?