Quantcast
Channel: Ember.JS - Latest topics
Viewing all 4745 articles
Browse latest View live

Ember foundation sass

0
0

@chris1 wrote:

Hello,

i cannot get foundation to work

Steps to reproduce: ember new testapp ember install ember-cli-sass rename app.css to app.scss => all works finde

but, then: npm install --save-dev ember-cli-sass ember install ember-cli-foundation-6-sass $ ember g ember-cli-foundation-6-sass i get: Error: Could not find module foundation-sites imported from ember-cli-foundation-6-sass/initializers/zf-widget and have a blank page.

ember tries to install foundation 6.3.1

any ideas / experiences?

Many Thanks, christian

Posts: 1

Participants: 1

Read full topic


How to call submit on an input form?

0
0

@Raphael_FOSSE wrote:

Hi everyone,

I’ve build a todo-list with a Rails-API. I’ve followed a tutorial, even if it was deprecated, by following the guides and others resources, I’ve succeed most steps.

However, since yesterday, I can’t understand what’s wrong in my code :

app/templates/application.hbs 

<h1> ToDo App </h1>

{{input type="text" id="new-todo" value=newTitle placeholder="what's need to be done?" action="createTodo"}}

here’s my app/controllers/todos.js

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    createTodo(){
      this.store.createRecord('todo', {
        title: this.get('newTitle'),
        isCompleted: false
      });
    }
  }
});

So, I want a user to write his todo and to generate the create action when the user leave the input or when he press ‘enter’.

Maybe, i’m doing it wrong, I didn’t succeed to find any recent tutorials on this subject.

Posts: 1

Participants: 1

Read full topic

Dynamically rendering a component

0
0

@Mohana_Priya wrote:

I want a component to be re-rendered with different attributes on chaninging a controller property. So, I have my code like,

{{#if (eq diffView "type1")}}
   {{comp/mycomp diffId=diffFile.id  diffIdPrefix=diffView view=diffView thisCtrl=thisCtrl commitDiff=diffFile.diff filePath=diffFile.fileName}}
{{else}}
   {{comp/mycomp diffId=diffFile.id  diffIdPrefix=diffView view="line-by-line" thisCtrl=thisCtrl commitDiff=diffFile.diff filePath=diffFile.fileName}}
{{/if}}

Changing the property diffView, throws me error like, vendorrepository.js:13602 Uncaught DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node. at clear(…) at UpdatableBlockTracker.reset (…) at TryOpcode.handleException (…)

This error was inside ember source code. I think there was some error trying to remove the older component. Pls help me out with this issue.

Posts: 3

Participants: 2

Read full topic

Conditionally render nested parent route

0
0

@Hummingbird wrote:

consider the following routes:

  • post: render the details about a post
  • post/edit: renders editable details about the post (this might be quite different from post)
  • post/comment: renders post AND details about the comment

The issue here is that we need to render the post template in the following two routes: post and post/comment. We explicitly do not want to render the post template on the route post/edit.

Usually one would put stuff that should not be rendered when the child route is active in the corresponding post/index template. However, now we need to copy all that stuff from that template to the post/comment template as well.

Alternatively one might put everything that needs to be shared in post and post/comment into a component. However, now we need to put all our actions into the component as well, violating the DDAU principle or we need to duplicate that logic to post and post/comment controllers.

Lastly, we could make use of the router service and conditionally render only {{outlet}} (edit) or the whole template using a simple if in our post template and a computed property in the controller:

showPost: computed('model', 'router.currentURL', function() {
    return !this.get('router').isActive('post.edit', this.model);
  }),

Now when the edit route is active, the parent template is not rendered. On every other child route the template gets rendered.

However this seems to be quite a workaround. Is there a better solution?

Posts: 1

Participants: 1

Read full topic

CRUD using a modal input form

0
0

@Nacho_B wrote:

Hi, I have a pretty standard CRUD for clients. The main route is clients.js, and the subroutes are index.js, show.js, edit.js, etc. You know…, mostly the structure learned from tutorials. :slight_smile:

But I want the edit form page to be loaded as a modal OVER the show page.

It seems that “ember-modal-dialog” can be used to display a model for a specific route (https://github.com/yapplabs/ember-modal-dialog#routable-usage).

After some intents, as promised, my edit route pops as modal, with the edit form template, BUT the show template disappears from the background. Only the headers remain.

I think that this is not the right approach. As far as I know (as a newbie) the edit form template still REPLACES the show template. The only difference is that the {{modal-dialog}} tags forces the template to go modal.

So… what should be a right technique? A dumb input form without a route?

Thank you in advance.

Nacho B.

Posts: 2

Participants: 2

Read full topic

'todo' was saved to the server, but the response does not have an id and your record does not either

0
0

@Raphael_FOSSE wrote:

Hi,

I’m facing this error since yesterday, Error: Assertion Failed: 'todo' was saved to the server, but the response does not have an id and your record does not either.

I know it should come from app/serializers/todo.js or my app/routes/application.jsbut after looking into severals forum, I have to ask the question too expert emberJs dev, as i’m a newbie :smiley:

Here’s my app/serializers/todo.js:

import DS from 'ember-data';

export default DS.JSONSerializer.extend({
  serialize: function(record, options) {
    var json = this._super.apply(this, arguments); // Get default serialization

    json.id = record.id;  // tack on the id

    return json;
  }
});

And my app/routes/application.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(){
    return this.store.findAll('todo');
  },
    actions: {
      createtodo: function() {

        var titleInput = this.get("newTitle")
        var todo = this.store.createRecord('todo', {
          title: titleInput,
          isCompleted: false
        }); 

        this.set('newTitle', '');
        todo.save();
      }
    }
});

The way the createtodo action is triggered app/templates/application.hbs:

      {{input type="text" id="new-todo" value=newTitle}}
      <button {{action "createtodo"}}>Save</button>

So my objec is created but not save. When i’m looking into my ember Inspector, I see that each object I create have an ID but the title field is null or "".

This is a todoApp with an Rails-API as back and Ember as front.

Anyone see what’s wrong here ?

Posts: 1

Participants: 1

Read full topic

Broccoli issues with HTML comments

0
0

@IAmAndre wrote:

Hi,

I’ve started learning Ember an hour ago. After following the quickstart guide I’m trying to use it on my current website. So I copied the HTML code into the application.hbs template, and I keep having errors similar to this: “Closing tag ul (on line 45) without an open tag.

Here’s what this part of the code looks like:

       <nav id="right_menu" class="d-none d-md-block">
			<ul>
				<li><a href="#"><i class="fas fa-search"></i></a></li>
				<li><a href="#"><i class="fas fa-shopping-cart"></i></a></li>
  <!--			<li><a href="#">À propos</a></li>
				<li><a href="#">Contact</a></li> -->
			</ul>
		</nav>

Now as soon as I remove the commented part, the error disappears, and this happens in many other parts of the code containing commented sections. I’m kind of confused now, is there any way to fix this?

Thanks

Posts: 2

Participants: 1

Read full topic

Ember mirage, return multiple objects

0
0

@GregWeb wrote:

Hi, I have two objects defined in my mirage config.js they look like this:

  var campaigns = [
    {
      id: '1',
      type: 'marketing',
      name: 'Taylor Stitch - Back in Stock',
      subject: 'The Shuttle Loomed Selvage Chambray Jack',
      from: 'contact@taylorstitch.com',
      preheader: 'Shuttle Loomer Selvedge Chambray Jacks are now available for immediate delivery.',
      createdAt: Date.now(),
      lastModified: Date.now(),
      activeTemplateId: 'rebelmail-templates/multiproduct/v1',
      templateSettings: templateSettings
    },
  ];

  var meta = {
    page: 1,
    perPage: 10,
    totalPages: 1
  }

Everything works fine if I return the hardcoded objects in my endpoint like this:

 this.get('/campaigns', function () {
    return {
      campaigns, 
      meta
    }
  });

But if I create a factory for campaigns, then I get an error no matter how I try to return both objects:

 this.get('/campaigns', function (schema, request) {
    return schema.campaigns.all(), meta;
  });

//Assertion Failed: The response to store.query is expected to be an array but it was a single record. Please wrap your response in an array or use `store.queryRecord` to query for a single record."

I’m brand new to mirage, how can I pull of what I’m trying to achieve properly?

Posts: 1

Participants: 1

Read full topic


Send actions from components to controllers

0
0

@Oudriss wrote:

Hello every one,

I am working on an ember project and I am wondrning if I can use components inside others components.

In fact, I would like to know if there is a better way to send action from first component to another component, this one must also send it to the controller. And why not send the action directly to controller ?

First component -> sendAction -> second component -> sendAction -> controller .

Thank you.

Posts: 2

Participants: 2

Read full topic

Questions about actions

0
0

@IAmAndre wrote:

Hi,

I’m still discovering Ember and I am confused about the way actions are handled. To be more specific, I’m using a Bootstrap dropdown button provided by the ember-boostrap module. I’m looking for a way to have some items sorted depending on the option chosen by the user.

Here’s what the code looks like:

{{#bs-dropdown id="sort" as |dd|}}
   {{#dd.button}}Sort By {{/dd.button}}
   {{#dd.menu as |ddm|}}
       {{#ddm.item action "sortByPrice" low_to_high}}{{#ddm.link-to "index"}}Prix croissant{{/ddm.link-to}}{{/ddm.item}}
       {{#ddm.item}}{{#ddm.link-to "index" onclick="sort_by_price('high_to_low')"}}Prix décroissant{{/ddm.link-to}}{{/ddm.item}}
    {{/dd.menu}}
{{/bs-dropdown}}

As you can see on the second item, I used the very naive way with the normal JS “onclick” attribute, which didn’t work as the attribute wasn’t even displayed on the final HTML.

On the first item, I tried to create an action and pass it “low_to_high” as a parameter. However, I’m unable to have this action performed. I did check the documentation, but I’m a little confused by some aspects of it, and the architecture of the ember-bootstrap module is rather confusing.

I first tried to edit the node_modules/ember-bootstrap/addon/components/base/bs-dropdown.js file. The file starts with

import Component from '@ember/component';
import { computed } from '@ember/object';
import { bind } from '@ember/runloop';
import layout from 'ember-bootstrap/templates/components/bs-dropdown';

And then there is:

export default Component.extend({
layout,
classNameBindings: ['containerClass'],
....
actions: {
// My addition
sortByPrice(param){
  alert("sorting");
},

toggleDropdown() {
  if (this.get('isOpen')) {
    this.send('closeDropdown');
  } else {
    this.send('openDropdown');
  }
},

I wasn’t sure if it was the right file to edit and if it was actually used, but making changes to it impacts the actual web page. However, the added new action is never executed.

I then made the same changes to the node_modules/ember-bootstrap/addon/components/base/bs-dropdown/menu/item.js

import Component from '@ember/component';

/**
 Component for a dropdown menu item.
 See [Components.Dropdown](Components.Dropdown.html) for examples.

@class DropdownMenuItem
@namespace Components
@extends Ember.Component
@public
*/
export default Component.extend({
   actions:{
	sortByPrice(param){
      console.log("sorting");
    }
   }
});

So what confuses me is

  1. Why do these pages contain “extended” classes, and for example, what links the DropdownMenuItem to all the rest? I assume that there should be a file compiling several other files, but I can’t find any trace of this snippet in the generated JS file.
  2. Is there any way to add a classic “onclick” event?
  3. In this particular case, what is the relationship between the menu-item and the bootstrap-menu? Would it be possible for instance to use a menu_item outside of a bootstrap_menu

Thank you for going through all this, and feel free to ask me if I missed some explanations.

Posts: 1

Participants: 1

Read full topic

Using Ember Data Model

0
0

@harimath wrote:

In an Ember app, is it a good idea to use data models for mapping attributes across different places in the app (in some route/controller/component, etc)

I think we need to use DS.Adapter to use models within Ember (have not tried it much though)

Are there any good practical examples of the same ? Essentially, I need it to map to server-side data models & may be match it to the XHR request payloads/JSON response

Posts: 1

Participants: 1

Read full topic

October Amsterdam Ember Meetup

0
0

@broerse wrote:

RSVP for the Amsterdam Ember Meetup on the first Ember{{fest}} day:

Posts: 1

Participants: 1

Read full topic

Appending/rendering Ember component with non-ember library

0
0

@BlueRaja wrote:

We use FullCalendar, a non-Ember plugin for displaying a calendar with events on it (think of meeting on the Outlook calendar). The UI of these events can be customized using a callback which passes the event as a jQuery object.

Is it possible to inject an Ember component into these events?

Ideally I’d like to do something like this

$element.append(MyComponent.create(options).getHtml());

but unfortunately there doesn’t seem to be any way to get the HTML (or DOM) for a component that doesn’t already exist on the DOM.

I also tried this:

Ember.getOwner(this)
  .factoryFor('component:my-component')
  .create(options)
  .appendTo($element);

but that causes Ember to crash with Illegal Invocation: elMatches.call(el, selector), apparently because $element doesn’t exist on the DOM yet.

Another option I’ve seen online is to do something like

// Template
<div style="display: none">
  <div id='myComponent'>{{my-component}}</div>
</div>

//component.js
const myComponentDom = this.$('#myComponent').detach();
$element.append(myComponentDom);

But then there is no way to customize the component with the options, meaning I’d have to use jQuery to manually edit the component, at which point I might as well just hard-code the HTML in the JS file.

Does anyone know how to do this?

Posts: 1

Participants: 1

Read full topic

Get Render Performance details via javascript hook

0
0

@gokulk138 wrote:

The render performance tab of the e-inspector looks cool and will definitely be useful for debugging performance lags. Is there a way I can get those data via a javascript hook in my application in dev mode. So, that I can use it for alerts and insights to developers.

Posts: 1

Participants: 1

Read full topic

Ember cli not giving me latest

0
0

@plebeian wrote:

Correct me if I’m wrong, but running ember init is supposed to give me the latest ember 3.4.x everything if I’ve updated ember-cli to 3.4.2, yes? I’ve updated global ember-cli to 3.4.2. running ember --version only ever shows ember-cli: 3.1.4, and running init only ever gives me 3.1.4, and ember-source and -data aat 3.1.0 in package.json.

What on earth am I doing wrong here? Thanks.

Posts: 1

Participants: 1

Read full topic


How do you deal with large, deeply nested objects in Mirage?

0
0

@GregWeb wrote:

Every example I’ve seen for mirage (and I just spent half an hour clicking through every repo I found using Mirage) uses a simple flat structure their factories…

But I have an account factory that looks like this:

//factories/account.js

account {
  /*..dozens 
  of other 
  key values
  ...
  */
  settings: {..},

  integrations: {
    googleAnalytics: {..}
    webhooks: {
      state: {
        url: "example.com"
        status: "active"
      }
    }
  }
}

When I fill out webhook info and submit I just need the updated webhook values to be returned from the post route.

How do I achieve this?

Posts: 1

Participants: 1

Read full topic

Examples of Ember apps/addons with Typescript?

0
0

@localyost wrote:

Hi Everyone,

I’ve been flirting with the idea of implementing TypeScript along with Decorators in my Ember codebase.

Does anyone know of any open projects that use one or both of these that I could take a look at?

thanks! Peter

Posts: 1

Participants: 1

Read full topic

How to get module option from test command in environment config

0
0

@osawyer wrote:

When running tests using a command such as ember test --module="Acceptance | example" , how could I capture the module option within the environment.js config file?

The aim here is to pass a flag indicating the acceptance test module into the application instance when testing. The flag will simply be used in the application to check whether to execute a block of code.

One idea I’ve had is that perhaps I can pass a flag into the application instance from the beforeEach hook in acceptance test modules. This would be better because I wouldn’t have to include the --module option in the test command, and I’d be able to run all my tests at once. I’m not sure this is possible or how to do this but it’s currently my best start.

Posts: 2

Participants: 2

Read full topic

Ember Engines (in-repo) duplicate code

0
0

@lvegerano wrote:

I have an in-repo engine that has a dependency on ember-truth-helpers. The host app also has a dependency on ember-truth-helpers. After a building the app I end up with a vendor.js and a engine-vendor.js that define the same helpers. During debug I realize that the engine when invoking the helpers it uses the definition in vendor.js not the one in engines-vendor.js. I would like to remove that (what it seems) unnecessary duplication. As the define function in the loader does not override. Is that possible?

Posts: 2

Participants: 1

Read full topic

this.get('route').transitionTo with values to a different route

0
0

@SowmyaManohar wrote:

Hi am trying to pass the userId returned from api to forcePassword page, so from that page i can form new data to api with just pwd from user, I am struggling to pass it to the next route. Tried as query parameters in transitionTo , but the page is not transitioning , My code

let loginPromise = .ajax({ url: this.host + "/login", type: "POST", data: data }) .then( result => { if(result.new){ alert("here"+ result.userId); router.transitionTo(`forcepassword/{result.userId}); //this.transitionToRoute(/forcepassword/${result.userId}`); //router.transitionTo(‘forcepassword’,result.userId)// this throws error saying needs model, but throughout our app we have maintained models from api } if(result.token){ localStorage.setItem(ENV.TOKEN_KEY, result.token); router.transitionTo(‘application’); } }, error => { alert(“Invalid credentials”); //console.log(error.responseText) } )

router.js : this.route(‘forcepassword’, { path: ‘/forcepassword/:user_id’ });

when using just transitionTo it is working . without value being passed

Posts: 1

Participants: 1

Read full topic

Viewing all 4745 articles
Browse latest View live




Latest Images