@doni wrote:

This is in JavaScript:

button = document.createElement(“BUTTON”); buttonText = document.createTextNode(“Edit”); button.setAttribute(“name”,name); button.appendChild(buttonText);

Posts: 2

Participants: 2

Read full topic

@WMattGardner wrote:

I’m interested in ways of thinking about this problem: setting query params programatically. Suppose I have some content coming from a model (layers on a map, for example), and I want those layers to be “toggleable”, off or on, and preserve that state in the URL. I can try this, but it’s either ignored or since the controller is initialized before my data comes down, it won’t update:

// routes/application.js
afterModel() {
  const paramsFromModel = stuff; // munge and extract what should be param-able
  this.controllerFor('application').set('queryParams', paramsFromModel);
  this.controllerFor('application').setProperties( {  /* set their detaults */  } );
}

Over the years, I’ve run into this problem many times, in which I’ve wanted to set up what the query params are from data that comes in from the model hook of the route. I have tried dozens of different approaches, including:

• Using an application instance-initializer, which gets me access to the store and the needed controller so that I can set up those queryParams in time. The problem is that these initializers aren’t able to be async, as deferReadiness is no longer available in these kinds of initializers (it’s only available in initializers, which won’t let me access the store as it doesn’t exist at that point in booting up the app).
• Using beforeModel will honor changes made to controller queryParams, but doing anything asynchronously (like fetching data to define those) means they aren’t set “in time”, and those QPs aren’t bound correctly.
• Using setupController (which nominally seems like the place to do this but is not) simply does not honor newly set queryParams.

Workarounds I’ve tried include:

• Using an array query param to include a list of properties that are implicitly “true”. This approach lends itself to lots of aliasing properties and general confusion around when and where query params are handled. It also requires setting up separate computed properties to manage status from the original query params.

Ember Parachute helps with a lot of these things, and also includes hooks for managing when query params are changed, but it doesn’t get what I need with the kinds of apps I’m building.

I simply cannot find a decent pattern around this, short of a computed string array on the controller (visibleLayers: []) which implicitly determines visibility state of layers that come in from the server. This mostly works, but it’s very confusing and doesn’t get me all the default behavior from normal QPs (working defaults).

Curious to see how 1) others have solved this issue 2) what other ways to address this issue (models that are “QP-able”, and setting up the app to honor those).

EDIT: Ideally, I would love to be able to do something like this:

  setupController(controller, model) {
    const queryParams = model.layerGroups
      .reduce((acc, curr) => {
        acc[curr.get('id')] = curr.get('visible');
        return acc;
      }, {});

    const layerGroupIDs = model.layerGroups.mapBy('id');
    controller.set('queryParams', layerGroupIDs);

    controller.setProperties({
      ...queryParams,
    });

    this.replaceWith(this.routeName, {
      queryParams,
    });

    super.setupController(controller, model);
  }

But updates to the controller properties never get saved in the URL.

Posts: 2

Participants: 2

Read full topic

@belgoros wrote:

I have a component that I call from a for loop in a template and use just to display a model values:

# templates/holiday_hours.hbs

<form {{action "updateHolidayHours" on="submit"}}>
      {{#each model as |holidayHour|}}
        {{holiday-row holiday=holidayHour}}
      {{/each}}
...

Like this, I display several rows with values to update. I’d like to make it possible to a create a new row and reuse the same component template.

Here is the template code

<form {{action "updateHolidayHours" on="submit"}}>
      {{#each model as |holidayHour|}}
        {{holiday-row holiday=holidayHour}}
      {{/each}}

      {{#if isAddingHoliday}}
        <form {{action "createHoliday" on="submit"}}>
          {{#holiday-row holiday=model}}
            <div class="form-check sm-2">
              <button type="button" type="submit" class="btn btn-success btn-sm">
                <span class="oi oi-plus"></span>
                {{t 'buttons.add'}}
              </button>
            </div>

            <div class="form-check ml-sm-2">
              <button type="button" class="btn btn-danger btn-sm" onclick={{action "cancelAddHoliday"}}>
                <span class="oi oi-x"></span>
                {{t 'buttons.cancel'}}
              </button>
            </div>
          {{/holiday-row}}
        </form>
      {{else}}
        <button type="button" class="btn btn-success btn-sm mb-2" onclick={{action "addHoliday"}}>
          <span class="oi oi-plus"></span>
          {{t 'buttons.new.language'}}
        </button>
      {{/if}}
      <div class="float-right">
        <button type="submit" class="btn btn-success">{{t 'buttons.save'}}</button>
      </div>
    </form>

isAddingHoliday is a just a flag to flip to indicate if I should display a new row with empty fields or not. Here is how it is triggered in the corresponding controller:

# controllers/holiday-hours.js

 import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  currentShop: service('current-shop'),
  isAddingHoliday: false,

  actions: {
    addHoliday() {
      this.set('isAddingHoliday', true);
      this.set('model', this.store.createRecord('holiday-hour'));
    },

    cancelAddHoliday() {
      this.set('isAddingHoliday', false);
    }
  }
});

I tried to call

 this.set('model', this.store.createRecord('holiday-hour'));

But it erased my previously loaded model values. What is the right way to do that ? Thank you.

Posts: 1

Participants: 1

Read full topic

@Ben_Glancy wrote:

Hi,

I am curious to know how far other people take the use of routes. With the transition retry and afterModel() and so on. I find it’s easy to have a route that “does” something, then immediately leave the route on success.

For instance, if I have a room planner. Is it an anti-pattern to have a child route that adds an item to the room, then exit back out of the child route. Or an equivalent, perhaps to add to a list.

You could have http://mywebsite.com/addanitem/2 then it adds an item “2” to a list and then the route handles the decision about whether to come out maybe based on the return value of the operation, or whether the data has been fetched correctly and so on.

I saw this but wondered whether it is taking routes too far.

Posts: 1

Participants: 1

Read full topic

@jcorradino wrote:

Hey all!

We are looking into building out a component similar to Ember-Light-Table and hit a bit of a snag. This component utilizes component contextualization to improve on flexibility and implementation.

An example setup:

{{#my-table model=dataModel as |table|}}
    {{table.column name="Column 1" property="dataAttribute"}}
    {{table.column name="Column 2" property="dataAttribute"}} 
    {{#table.column name="Column 3" property="dataAttribute" as |column|}} 
        {{some-helper column.data}}
    {{/table.column}}
{{/my-table}}

To put in place a cleaner, more “modern web” UI, we are looking to set up a table without pagination. Or, if need be, setting the threshold high enough that most users never see it.

The catch: this needs to be ADA compliant, removing solutions like Vertical Collections - unfortunately, Infinite scrolling just does not work very well with screen readers.

With a reasonable number of records, there is no issue… but you start encountering long running script errors in IE at around 250 records.

Using Ember Concurrency, we’ve managed to suppress these errors… though the records still take a significant amount of time to load, lagging the UI a bit in the process.

Gathering some metrics, I’ve found that Ember components take around 1ms to render. This means that a table of six columns and 400 rows takes - as a baseline - 2.4 seconds without any overhead. With computed properties and such, I’m seeing about double that number.

Has anyone run into an issue like this one? (rendering a large number of elements takes a massive amount of time)

If so, how did you solve for it? Do you know of a way to streamline the render? From what I am seeing, it looks as if a significant amount of time is spent drawing to the screen. This being the case, a potential fix would entail some kind of “buffer”. That is, instead of many small changes to the DOM, buffer the changes and write them all at once. (or in chunks)

Let me know what you think.

Thanks for the help!

Posts: 5

Participants: 2

Read full topic

@alee642b wrote:

Hi everyone,

I’ve recently started learning EmberJS and I’m trying to write an application that works with Chrome/Firefox AND IE11. I’ve been running into a problem where the app will load and render just fine on Chrome/Firefox, but on IE11, the best that I can manage is a “navigation occurred” message in the console. I’ve tried turning on debug messages in environment.js but I get the same result and no new leads to go off of.

Yesterday I tried a different tack and generated the super-rentals app again, just to see if I could get the {welcome-page} to render on both Chrome/Firefox and IE11. Once again, Chrome/Firefox succeeded; IE11 failed to render anything.

Lastly, I tried pulling down from github a completed version of the super-rentals app (from here: https://github.com/ember-learn/super-rentals) and seeing if I could get that standing. One ember s later and once again I had a working app in Chrome/Firefox and a blank screen in IE11.

I’ve been scratching my head over this one for a few days now. To me, it seems like it has to do with the fact that IE11 reads and renders code differently than Chrome/Firefox. I would have also guessed I’m missing a polyfill or two for IE11, but I’m not certain how I could track that down if that’s the case. Finally, I’m floored that simply generating super-rentals for the {welcome-page} alone doesn’t render in IE11.

What could be happening here and what suggestions can be offered to follow up on?

Thanks everyone!

Posts: 8

Participants: 4

Read full topic

@rondale_sc wrote:

Mostly documenting for future travelers:

I needed to run an initializer only in FastBoot land. Rather than guard for FastBoot I want to use a FB initializer.

In an addon you can do so by adding your initializer (in my case an instance-initializer) to:

<root-of-addon>/fastboot/addon/instance-initializers/<name-of-your-initializer>

and in an application:

<root-of-app>/fastboot/instance-initializers/<name-of-your-initializer>

If you’d like to see more detail on this please referr to this EmberCLI ticket by @kratiahuja

Cheers!

Posts: 2

Participants: 2

Read full topic

@mungalmaroti wrote:

Hi ,

Please help me regarding how to set the test case for default route . My default port is ‘http://localhost:2300/’ when I create a acceptance test case for dashboard. Than I am getting error that is
'there was no route defined to handle this request. Define a route that matches this path in your mirage/config.js file. Did you forget to add your namespace?} ’ Also i have share with you the screenshot for the same.

Dashboard_Error.PNG1584x405 30.9 KB

Please suggest me how to resolve this problem in ember js.

Thanks in advance. Maroti.

Posts: 1

Participants: 1

Read full topic

@jfschaff wrote:

I just had a hard time finding how to define an array with Ember’s new ES6 module imports. So here it is for others who might have the same question:

import { A } from '@ember/array';
...
this.set('someVar', A());             // empty Emberish array
this.set('someOtherVar', A([1,2,3]));

As explained in the doc here

A() is not needed if EmberENV.EXTEND_PROTOTYPES is true (the default value). However, it is recommended that you use A() when creating addons for ember or when you can not guarantee that EmberENV.EXTEND_PROTOTYPES will be true.

Posts: 1

Participants: 1

Read full topic

@vincenthure wrote:

Hello I am using ember-place-autocomplete to generate waypoint to my map. It’s working great, a very good addon. I just want to change the size of the input box and I don’t success

{{

place-autocomplete-field

value= model.adress

handlerController= this

inputClass= ‘place-autocomplete–input’

focusOutCallback=“done”

placeChangedCallback=“adressChanged”

placeholder=“Ville, lieu…”

}}

I don’t understand how work the inputClass.

Can I change the width in my scss?

Vincent

Posts: 1

Participants: 1

Read full topic

@Boo wrote:

I want to hide or disable 4 inspect tabs out of 6 tabs in the group of Inspector Body.

My 6 Inspect tab of html file was mentioned in below html code:

<div class="inspectors-view">
        <script id="metamorph-86-start" type="text/x-placeholder"></script>
            <div class="inspector-chooser">
                <script id="metamorph-92-start" type="text/x-placeholder"></script><script id="metamorph-223-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5714" class="ember-view icon clickable-icon active" title="Preview &amp; Information" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="preview" class="preview" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-223-end" type="text/x-placeholder"></script><script id="metamorph-224-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5717" class="ember-view icon clickable-icon" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="metadata_global" class="metadata_global" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-224-end" type="text/x-placeholder"></script><script id="metamorph-225-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5720" class="ember-view icon clickable-icon" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="metadata_contextual" class="metadata_contextual" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-225-end" type="text/x-placeholder"></script><script id="metamorph-226-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5723" class="ember-view icon clickable-icon" title="Aliases" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="alias" class="alias" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-226-end" type="text/x-placeholder"></script><script id="metamorph-227-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5726" class="ember-view icon clickable-icon" title="Added to..." style="width: 1em; height: 1em; font-size: 24px"><icon glyph="references" class="references" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-227-end" type="text/x-placeholder"></script><script id="metamorph-228-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5729" class="ember-view icon clickable-icon" title="Permissions" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="permissions" class="permissions" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-228-end" type="text/x-placeholder"></script><script id="metamorph-92-end" type="text/x-placeholder"></script>
            </div>
        <script id="metamorph-86-end" type="text/x-placeholder"></script>
        <div class="inspector-view">
            <script id="metamorph-93-start" type="text/x-placeholder"></script><script id="metamorph-93-end" type="text/x-placeholder"></script>
            <script id="metamorph-94-start" type="text/x-placeholder"></script>
                <script id="metamorph-95-start" type="text/x-placeholder"></script><div id="ember4758" class="ember-view inspector-body preview-and-information-view"><summary-info>
	<ui-summary-section tabindex="0">
		<ui-presentation>
			<h2 id="ember4767" class="ember-view inspect-heading message"><script id="metamorph-96-start" type="text/x-placeholder"></script>Content Details<script id="metamorph-96-end" type="text/x-placeholder"></script></h2>
		</ui-presentation>
		<ui-content>
			<table id="ember4804" class="ember-view details-list"><tbody>
	<script id="metamorph-100-start" type="text/x-placeholder"></script><script id="metamorph-97-start" type="text/x-placeholder"></script>
		<tr>
			<script id="metamorph-102-start" type="text/x-placeholder"></script><script id="metamorph-101-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4864" class="ember-view icon id" title="ID" style=""><icon glyph="type_dita_topic" class="type_dita_topic" set="types"></icon></rs-icon></td>
				<td core-role="label" class="id" data-bindattr-4="4"><script id="metamorph-103-start" type="text/x-placeholder"></script>ID<script id="metamorph-103-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="id" colspan="4" data-bindattr-5="5">
					<script id="metamorph-104-start" type="text/x-placeholder"></script>
						<script id="metamorph-105-start" type="text/x-placeholder"></script>1008 -&gt; 1006<script id="metamorph-105-end" type="text/x-placeholder"></script>
					<script id="metamorph-104-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-101-end" type="text/x-placeholder"></script><script id="metamorph-102-end" type="text/x-placeholder"></script>
		</tr>
	<script id="metamorph-97-end" type="text/x-placeholder"></script><script id="metamorph-98-start" type="text/x-placeholder"></script>
		<tr>
			<script id="metamorph-108-start" type="text/x-placeholder"></script><script id="metamorph-106-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4883" class="ember-view icon dtCreated" title="Created" style=""><icon glyph="version" class="version"></icon></rs-icon></td>
				<td core-role="label" class="dtCreated" data-bindattr-6="6"><script id="metamorph-109-start" type="text/x-placeholder"></script>Created<script id="metamorph-109-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="dtCreated" data-bindattr-7="7">
					<script id="metamorph-110-start" type="text/x-placeholder"></script>
						<script id="metamorph-111-start" type="text/x-placeholder"></script>2018-Mar-9 15:22<script id="metamorph-111-end" type="text/x-placeholder"></script>
					<script id="metamorph-110-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-106-end" type="text/x-placeholder"></script><script id="metamorph-107-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4889" class="ember-view icon creator" title="Created by" style=""><icon glyph="user" class="user"></icon></rs-icon></td>
				<td core-role="label" class="creator" data-bindattr-8="8"><script id="metamorph-112-start" type="text/x-placeholder"></script>Created by<script id="metamorph-112-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="creator" data-bindattr-9="9">
					<script id="metamorph-113-start" type="text/x-placeholder"></script>
						<script id="metamorph-114-start" type="text/x-placeholder"></script>system<script id="metamorph-114-end" type="text/x-placeholder"></script>
					<script id="metamorph-113-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-107-end" type="text/x-placeholder"></script><script id="metamorph-108-end" type="text/x-placeholder"></script>
		</tr>
	<script id="metamorph-98-end" type="text/x-placeholder"></script><script id="metamorph-99-start" type="text/x-placeholder"></script>
		<tr>
			<script id="metamorph-117-start" type="text/x-placeholder"></script><script id="metamorph-115-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4908" class="ember-view icon dtModified" title="Modified" style=""><icon glyph="versions" class="versions"></icon></rs-icon></td>
				<td core-role="label" class="dtModified" data-bindattr-10="10"><script id="metamorph-118-start" type="text/x-placeholder"></script>Modified<script id="metamorph-118-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="dtModified" data-bindattr-11="11">
					<script id="metamorph-119-start" type="text/x-placeholder"></script>
						<script id="metamorph-120-start" type="text/x-placeholder"></script>2018-Apr-13 18:07<script id="metamorph-120-end" type="text/x-placeholder"></script>
					<script id="metamorph-119-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-115-end" type="text/x-placeholder"></script><script id="metamorph-116-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4914" class="ember-view icon userId" title="Modified by" style=""><icon glyph="user" class="user"></icon></rs-icon></td>
				<td core-role="label" class="userId" data-bindattr-12="12"><script id="metamorph-121-start" type="text/x-placeholder"></script>Modified by<script id="metamorph-121-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="userId" data-bindattr-13="13">
					<script id="metamorph-122-start" type="text/x-placeholder"></script>
						<script id="metamorph-123-start" type="text/x-placeholder"></script>admin<script id="metamorph-123-end" type="text/x-placeholder"></script>
					<script id="metamorph-122-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-116-end" type="text/x-placeholder"></script><script id="metamorph-117-end" type="text/x-placeholder"></script>
		</tr>
	<script id="metamorph-99-end" type="text/x-placeholder"></script><script id="metamorph-100-end" type="text/x-placeholder"></script>
</tbody></table>
		</ui-content>
	</ui-summary-section>
	<script id="metamorph-124-start" type="text/x-placeholder"></script><script id="metamorph-124-end" type="text/x-placeholder"></script>
	<script id="metamorph-125-start" type="text/x-placeholder"></script><script id="metamorph-125-end" type="text/x-placeholder"></script>
	<script id="metamorph-126-start" type="text/x-placeholder"></script><script id="metamorph-126-end" type="text/x-placeholder"></script>	
	<script id="metamorph-127-start" type="text/x-placeholder"></script>
		<ui-summary-section tabindex="0">
			<ui-presentation>
				<h2 id="ember5744" class="ember-view inspect-heading message"><script id="metamorph-230-start" type="text/x-placeholder"></script>History<script id="metamorph-230-end" type="text/x-placeholder"></script></h2>
			</ui-presentation>
			<ui-content>
				<table id="ember5751" class="ember-view details-list"><tbody>
	<script id="metamorph-232-start" type="text/x-placeholder"></script><script id="metamorph-231-start" type="text/x-placeholder"></script>
		<tr>
			<script id="metamorph-234-start" type="text/x-placeholder"></script><script id="metamorph-233-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember5775" class="ember-view icon" title="2018-Mar-9&nbsp;by system&nbsp;1.0" style=""></rs-icon></td>
				<td core-role="label" class="" data-bindattr-15="15"><script id="metamorph-235-start" type="text/x-placeholder"></script>2018-Mar-9&nbsp;by system&nbsp;1.0<script id="metamorph-235-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="" data-bindattr-16="16">
					<script id="metamorph-236-start" type="text/x-placeholder"></script>
						<script id="metamorph-237-start" type="text/x-placeholder"></script>original<script id="metamorph-237-end" type="text/x-placeholder"></script>
					<script id="metamorph-236-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-233-end" type="text/x-placeholder"></script><script id="metamorph-234-end" type="text/x-placeholder"></script>
		</tr>
	<script id="metamorph-231-end" type="text/x-placeholder"></script><script id="metamorph-232-end" type="text/x-placeholder"></script>
</tbody></table>
			</ui-content>
		</ui-summary-section>
	<script id="metamorph-127-end" type="text/x-placeholder"></script>
</summary-info>
<content-preview>
	<ui-presentation>
		<h2 id="ember4936" class="ember-view inspect-heading message"><script id="metamorph-128-start" type="text/x-placeholder"></script>Preview<script id="metamorph-128-end" type="text/x-placeholder"></script></h2>
	</ui-presentation>
</content-preview>
</div><script id="metamorph-95-end" type="text/x-placeholder"></script>
            <script id="metamorph-94-end" type="text/x-placeholder"></script>
            <script id="metamorph-129-start" type="text/x-placeholder"></script><script id="metamorph-129-end" type="text/x-placeholder"></script>
        </div>
    </div>

There is having Inspect tab names called preview, metadata_global, metadata_contextual, alias, references and permissions, which was mentioned in html.

Inspect.hbr file having the inspector-chooser class:

{{#if content}}
    {{dynamic-view titleView model=content classNames="inspect-title"}}
    <div class="inspectors-view">
        {{#if showChoosers}}
            <div class="inspector-chooser">
                {{#each inspector in permittedInspectors}}
                    {{view Inspect.Choice inspector=inspector}}
                {{/each}}
            </div>
        {{/if}}
        <div class="inspector-view">
            {{#if selectedInspector.titleView}}
                {{dynamic-view selectedInspector.titleView model=content inspector=selectedInspector classNames="inspector-title"}}
            {{/if}}
            {{#if selectedInspector.bodyView}}
                {{dynamic-view selectedInspector.bodyView model=content inspector=selectedInspector classNames="inspector-body"}}
            {{/if}}
            {{#if selectedInspector.actionsView}}
                {{dynamic-view selectedInspector.actionsView model=content inspector=selectedInspector classNames="inspector-actions"}}
            {{/if}}
        </div>
    </div>
{{/if}}

In that I have found the permittedInspectors object class file in ember, it used in the file name called Inspect.js.

Ember.View.extend()
    .named("Inspect")
    .reopen({
        controller: function () {
            return Inspect.controller;
        }.property(),
        templateName: core.url('scripts/Inspect.hbr'),
        classNames: 'inspect-view',
        classNameBindings: [ 'inspectorClassName', 'controller.selectedInspector.working' ],
        inspectorClassName: function () {
        	var name = this.get('controller.selectedInspector.name');
        	var type = this.get('controller.titleView.type');
        	var classes = [];
        	if (name) { classes.push(name.dasherize() + '-inspect'); }
        	if (type) { classes.push(type.dasherize() + '-inspect'); }
        	return classes.join(' ');
        }.property('controller.selectedInspector.name', 'controller.titleView.type')
    });

Inspect.reopenClass({
    Inspector: Ember.Object.extend()
        .reopen({
        	name: null,
            icon: null,
            label: null,
            titleView: null,
            bodyView: null,
            actionsView: null,
            isValid: false
        }),
    Heading: core.view.Message.extend()
		.component('inspect-heading', ['key'])
		.reopen({
			classNames: [ 'inspect-heading' ],
			tagName: 'h2'
		})
});
Inspect.Inspector.create().named("Inspect.transitionalInspector");
Inspect.reopenClass({
	TitleView: Ember.View.extend({
		title: null
	}).reopenClass({
		type: null,
		isValidFor: function (model, user) {
    		return true;
    	}
	})
});

Inspect.reopenClass({
    UnhandledInspector: Inspect.Inspector.create({
        icon: 'act_help',
        title: "Unknown",
        bodyView: Ember.View.extend({
            template: Ember.Handlebars.compile("No inspector for object {{view.model}}")
        })
    })
});
Inspect.reopenClass({
    GenericTitleView: Inspect.TitleView.extend({
        template: Ember.Handlebars.compile("{{view.title}}"),
        title: function () {
            return this.get('model.displayName') || this.get('model.label') || this.get('model.name');
        }.property('model', 'model.loadState')
    }).reopenClass({
    	type: "Generic"
    })
});

Inspect.reopenClass({
    Choice: core.view.Icon.extend({
        size: 24,
        modelBinding: 'inspector.icon',
        titleBinding: 'inspector.tooltip',
        classNameBindings: [ 'active' ],
        active: function () {
            return this.get('controller.selectedInspector') === this.get('inspector');
        }.property('controller.selectedInspector', 'inspector'),
        click: function () {
        	this.set('controller.selectedInspector', Inspect.transitionalInspector);
        	Ember.run.later(this, function () {
        		this.set('controller.selectedInspector', this.get('inspector'));	
        	}, 50);
            
        }
    })
});
    

Ember.Object.extend(Ember.Observable, Ember.ActionHandler)
    .named('Inspect.Controller')
    .reopen({
    	parentController: core.controller,
		_actions: {
			contentItemActionMenu: function (highlight, anchor, context) {
				var pct = this.get('parentController');
				context.scope = context.scope || 'inspect';
				return pct.send('contentItemActionMenu', highlight, anchor, context);
			}
		},
        content: null,
        inspectors: null,
        titleViews: null,
        selectedInspector: null,
        setup: function () {
            this.set('inspectors', []);
            this.set('titleViews', []);
            this.assignModel();
            this.permittedInspectorsChanged();
        }.on('init'),
        assignModel: function () {
            var model = this.get('content');
            var user = this.get('user');
            var changeInspectors = false;
            this.get('inspectors').forEach(function (inspector) {
                if (inspector.get('model') !== model) {
                    inspector.set('model', model);
                }
                if (inspector.get('user') !== user) {
                    inspector.set('user', user);
                }
            });
        }.observes('content', 'user', 'inspectors.@each.name'),
        permittedInspectors: function () {
            var inspectors = (this.get('inspectors') || []).filter(function (inspector) {
                return inspector.get('isValid');
            });
            if (!inspectors.length) {
                return [ Inspect.UnhandledInspector ];
            }
            console.log(Inspect);
            return inspectors;
        }.property('content', 'inspectors.@each.isValid', 'inspectors.length'),
        showChoosers: function () {
            return this.get('permittedInspectors.length') > 1;
        }.property('permittedInspectors.length'),
        permittedInspectorsChanged: function () {
            var inspector = this.get('selectedInspector');
            if (this.get('permittedInspectors').indexOf(inspector) === -1) {
                this.set('selectedInspector', Inspect.transitionalInspector);
                this.set('selectedInspector', this.get('permittedInspectors.0'));
            }
        }.observes('permittedInspectors'),
        selectedInspectorChanged: function () {
            var selected = this.get('selectedInspector');
            this.get('inspectors').forEach(function (inspector) {
                inspector.set('selected', inspector === selected);
            });
            selected.notifyPropertyChange('model');
            selected.notifyPropertyChange('user');
            // Enforce update of body view, even if two inspectors share it.
            this.notifyPropertyChange('selectedInspector.bodyView');
        }.observes('selectedInspector'),
        userBinding: 'core.model.session.user',
        titleView: function () {
            var model = this.get('content');
            var user = this.get('user');
            return this.get('titleViews').find(function (titleView) {
                if (!titleView.isValidFor) { 
                    console.warn("titleView does not have `isValidFor(model, user)` implemented as a static method.");
                    return false; 
                }
                return titleView.isValidFor(model, user);
            }) || Inspect.GenericTitleView;
        }.property('titleViews', 'content'),
        detailsFullBinding: 'parentController.detailsFull',
        disclosePreviewAndInformation: true,
        disclosePermissions: false,
        discloseMetadata: false,
        discloseAliases: false,
        discloseVersionHistory: false,
        discloseReferences: false,
        discloseClones: false,
        discloseVariants: false,
        stateChanged: Ember.observer(
            function () {
                var items = Inspect.controller.stateChanged.__ember_observes__,
                    state = {},
                    ctl = this;
                items.forEach(function (key) {
                    state[key] = ctl.get(key);
                });
                core.storage.set("core-controller-inspectState", state);
            },
            'disclosePreviewAndInformation',
            'disclosePermissions',
            'discloseMetadata',
            'discloseAliases',
            'discloseVersionHistory',
            'discloseReferences',
            'discloseClones',
            'discloseVariants'
        ),
        actions: {

        }
    })
    .create()
    .named('Inspect.controller')
    .setProperties(core.storage.get("core-controller-inspectState") || {});

Inspect.reopenClass({
    registerTitleView: function (titleView) {
        if (!Ember.View.detect(titleView)) {
            if (titleView.get || titleView.extend) {
                throw new Error("You must pass a subclass of Ember.View or a POJsO to Inspect.registerTitleView.");
            }
            titleView = Ember.View.extend(titleView);
        }
        Inspect.controller.get('titleViews').pushObject(titleView);
    }
});
Inspect.reopenClass({
    registerInspector: function (inspector) {
        if (Inspect.Inspector.detect(inspector)) {
            inspector = inspector.create();
        }
        if (!Inspect.Inspector.detectInstance(inspector)) {
            if (inspector.get || inspector.extend) {
                throw new Error("You must pass an instance of Inspect.Inspector or a POJsO to Inspect.registerInspector.");
            }
            inspector = Inspect.Inspector.extend(inspector).create();
        }
        Inspect.controller.get('inspectors').pushObject(inspector);
        Inspect.controller.assignModel();
    }
});

Inspect.EditableModelFooter = Ember.ContainerView.extend({
    isVisible: function () {
        var enabled = this.get('inspector.canModify') !== false;
        var addEnabled = this.get('inspector.addItem') instanceof Function;
        var saveEnabled = this.get('inspector.save') instanceof Function;
        var revertEnabled = this.get('inspector.revert') instanceof Function;
        return enabled && (addEnabled || saveEnabled || revertEnabled);
    }.property('inspector.canModify', 'inspector.addItem', 'inspector.save', 'inspector.revert'),
    childViews: [
        core.component.UiButton.extend({
            size: 20,
            inspectorBinding: 'parentView.inspector',
            label: function () {
                return this.get('inspector.addItemText') || core.messageTable.get('chrome/inspect/footer/add');
            }.property('inspector.addItemText'),
            isVisible: function () {
                return this.get('inspector.addItem') instanceof Function;
            }.property('inspector.addItem'),
            enabledBinding: 'inspector.canAddItems',
            click: function () {
                this.get('inspector').addItem();
                return false;
            }
        }),
        core.component.UiButton.extend({
            size: 20,		
            inspectorBinding: 'parentView.inspector',
            label: function () {
                return this.get('inspector.saveText') || core.messageTable.get('chrome/inspect/footer/save');
            }.property('inspector.saveText'),
            isVisible: function () {
                return this.get('inspector.save') instanceof Function;
            }.property('inspector.save'),
            enabledBinding: 'inspector.canSave',
            click: function () {
                this.get('inspector').save();
                return false;
            }
        }),
        core.component.UiButton.extend({
            size: 20,
            inspectorBinding: 'parentView.inspector',
            label: function () {
                return this.get('inspector.revertText') || core.messageTable.get('chrome/inspect/footer/revert');
            }.property('inspector.revertText'),
            isVisible: function () {
                return this.get('inspector.revert') instanceof Function;
            }.property('inspector.revert'),
            enabledBinding: 'inspector.canRevert',
            click: function () {
                this.get('inspector').revert();
                return false;
            }
        })
    ]
});

Inspect.InspectIcon = core.view.Icon.extend({
    model: 'inspect',
    size: 24
});

By using this js. I need to hide or disable only the last 4 inspect tabs (metadata_contextual, alias, references and permissions). I want to preview only the first 2 tabs. I’m new to the ember js. can anyone help me on this. It will appreciable. Thanks in advance

Posts: 1

Participants: 1

Read full topic

@aboli wrote:

createcluster.hbs

{{#if displayError}} {{#display-error type=errorType errorMsg=errorMessage}}{{/display-error}} {{/if}}

<!--tabs added-->
<div class="mtabs" style="margin-top:10px;">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#users" rel="users">Users</a></li>
        <li><a href="#schemas" rel="schemas">Schemas</a></li>
        <li onClick={{action "getDataEntitiesList" "union"}}><a href="#review" rel="review">Review Entity List</a></li>
    </ul>
</div>
<div class="tab-content">
    <div id="users" class="tab-pane mtab_content" style="display: block;">
        <br>
        {{#multi-select-checkbox model=model.users header="Select Users : " filter="Add Selected User(s)"
        changeData=(action "getSelectedUsersList")}}{{/multi-select-checkbox}}
        <br>
        <b style="margin-left: 27px; float : left;">Total number of users selected : </b>
        <a class="pleftdesign" style="float : left;" onclick={{action (mut showUsers)}}>{{usersList.length}}</a>
    </div>

checkbox.hbs

{{header}}

{{input type="text" class="form-control" value=searchText key-up="getRegexFilteredText" placeholder="Enter Value" autofocus="autofocus"}}

{{multiselect-checkboxes tagName="ol" options=filteredContent selection=selectedObjects labelProperty=labelProperty filter=filter}}

Select all Deselect all Add Selected Value(s)

after selecting, add selected values button…

i should be able to view "total no of users selected :"message on page. but i am not able to render template to see that text.

Can u plz help

Posts: 1

Participants: 1

Read full topic

@mattmcmanus wrote:

I’ve spent a couple minutes searching for this to no success. I imagine it’s just not possible yet. Is there a editor integration for ember-template-lint?

I’m using atom, but I’m sure it may be useful to know of other editors as well.

Posts: 5

Participants: 3

Read full topic

@belgoros wrote:

I tried to use sendAction to call another route action from component like that:

# components/holiday-hour.js

actions: {
...
    deleteHoliday(holiday) {
      this.sendAction('deleteHoliday', holiday);
    },
  }

I have deleteHoliday action defined in holiday-hours.jsrouter:

# routes/holiday-hours.js

actions: {
...
deleteHoliday(holiday) {
      console.log('ROUTE-> deleteHoliday called');
      let holidayToDelete = this.store.peekRecord('holiday-hour', holiday.get('id'));
      holidayToDelete.destroyRecord().then(function() {
        this.get('flashMessages').success(route.get('i18n').t('flash.holiday.removed'));
      });
    },

Here is how the action is triggered from the component template:

# templates/components/holiday-hour.hbs

<button type="button" class="btn btn-danger btn-sm mt-1" {{action 'deleteHoliday' holiday}}>
      <span class="oi oi-trash"></span>
</button>

And it is never called What is wrong with that ? Thank you.

Posts: 1

Participants: 1

Read full topic

@Ben_Glancy wrote:

If my route only uses a parent model as data, would I return it using the model hook (ie with modelFor(‘parentModel’)) or by setting it with setupController()?

               model(params) {
        		var plannerData = this.modelFor('planner');
        		return plannerData;
        	},

OR

setupController(controller) {
	var plannerData = this.modelFor('planner');
	controller.set('model', plannerData);
}

Posts: 2

Participants: 2

Read full topic

@Levi_Hugo wrote:

Hi newbie here. I’m using Ember.computed.sort and was wondering how to properly use a custom function to sort a model property that is ‘belongsTo’. I managed to make it work by doing: sortDefinition: [‘supervisor.name:asc’]. Anyone know how to do it using a custom function? Screenshot below is what I’m currently working with, but it doesn’t work. I hope my question makes sense. Thanks in advance.

Screen Shot 2018-05-03 at 3.04.56 pm.png1148x600 46.5 KB

Posts: 3

Participants: 2

Read full topic

@Garun wrote:

I have two models in Ember: field-type, field-option, defined as follows:

import DS from ‘ember-data’;
export default DS.Model.extend({
…
fieldTypes: DS.hasMany(‘fieldType’)
});

import DS from ‘ember-data’;
export default DS.Model.extend({
…
leadFields: DS.hasMany(‘leadField’), //probably ignore this line, connection to the other model. fieldOptions: DS.hasMany(‘fieldOption’)
});

Then I fetch fieldType object in component’s init:
init() {
…
let a = this.get(‘store’).findRecord(‘fieldType’,1); //this goes ok
this.set(‘a’, a);

Then try to fetch fieldOptions in a computed value in this component
let val = this.get(‘a’); //no problem here
val.get(‘fieldOptions’); //Object, of an empty array
But it returns result of length=0, it actually doesn’t even send a request to backend, what I believe is the main issue. What am I doing wrong here?

Backend is looback3, fieldType and fieldOptions are connected via hasManyThrough relationship (have intermediate model). Looback explorer presents GET /field-types/{id}/fieldOption which works as it expected, so the data in the DB is set properly, but the thing is Ember doesn’t send the request.

Posts: 1

Participants: 1

Read full topic

@wojo wrote:

I’m getting two errors when upgrading to the latest version. The error message for the first is below. It gives an error when calling this.get('features'). features is the ember-feature-flags addon. The suggestion from the error is to use a .get which is already being used in the code.

Screen Shot 2018-05-02 at 3.17.59 PM.png1424x376 116 KB

The second comes from accessing controllers. When using ember inspecter, I can see that the application controller is registered.

Thanks in advance!

Posts: 5

Participants: 3

Read full topic

@richgt wrote:

Hey folks - we’re running into a bit of an odd issue in a test while trying to upgrade our app to Ember 3.1, and it appears glimmer related (though we’ve hit 3 red herrings already, so forgive me if this is another one). We’re getting the following error when calling Ember.Handlebars.compile:

TypeError: (0 , _util.getAttrNamespace) is not a function
    at TemplateCompiler.attribute

After some experimentation, we’ve confirmed we get this error on any simple div with an attribute:<div class="blah">Hello</div>, so our template is not the issue. Any help here is greatly appreciated.

Posts: 1

Participants: 1

Read full topic

@Loz wrote:

Hi, I’m trying to run tests in the browser, but I’m getting a lot of these errors:

“Error: Assertion Failed: You cannot make a new Ember.Application using a root element that is a descendent of an existing Ember.Application”

Can anyone shed any light on this?

(Its an ember app, nested inside a rails app, and also has ember-electron in the mix too)

I don’t get these errors when running tests in the console with headless chrome

Posts: 1

Participants: 1

Read full topic