embersherpa / ama Goto Github PK

Currently have this SO question open about testing initializers
http://stackoverflow.com/questions/31437916/ember-test-intializer-that-requires-model

I have an initializer that registers some modules with the application from a JSON object on the page in a script tag. Works fine in the application but the test fails because it cannot find the models that are expected.

initialzers/bootstrap-payload.js

export function initialize(container, application) {
  var store = container.lookup('service:store'),
    payloadKeys = Object.keys(BOOTSTRAP_DATA);

  payloadKeys.forEach((key) => {
    var registryKey = `bootstrap-payload:${key}`,
        model;

    model = store.createRecord(key, BOOTSTRAP_DATA[key]);
    application.register(registryKey, model, {instantiate:false});
  });
}

export default {
  name: 'bootstrap-payload',
  after: 'ember-data',
  initialize: initialize
};

tests/initializers/bootstrap-payload-test.js

import Ember from 'ember';
import { initialize } from '../../../initializers/bootstrap-payload';
import { module, test } from 'qunit';

var registry, application;

module('Unit | Initializer | bootstrap payload', {
  needs: ['model:channel'],

  beforeEach: function() {
    Ember.run(function() {
      application = Ember.Application.create();
      registry = application.registry;
      application.deferReadiness();
    });
  }
});

// Replace this with your real tests.
test('it works', function(assert) {
  initialize(registry, application);

  // you would normally confirm the results of the initializer here
  assert.ok(true);
});

tests/index.html includes an example BOOTSTRAP_DATA variable in it that contains a model that is always expected to be there called channel. When running ember test I get the following error.

at http://localhost:7357/assets/test-support.js:5604: No model was found for 'channel'
How can I inject this dependency the needs field doesn't seem to work in this case. Or is there anyway to make the initializer more testable.

=-=

Using Ember-CLI 1.13.1. I have used https://github.com/artificialio/ember-cli-foundation-sass in my ember. I have followed the tutorial and SCSS is working out of the box.

I created a component and in the component I used this code from another github page

initFoundation: Ember.on('didInsertElement', function () {
  Ember.run.next(() => {
    Ember.$(document).foundation();
  });
})

It also didnt seemed to work. I am getting Uncaught TypeError: Ember.default.$(...).foundation is not a function Error on page load

in a component I call a web service and save the results in a controller property.

On the didInsertElement event I grab a div (Ember.$.('#someDiv')) and initialize the bootstrap fullCalendar widget. Part of that is a handle to a function that fullCalendar calls to get event data for rendering.

In my component I have it defined like this:

import Ember from 'ember';
import moment from 'moment';
const {
    on
} = Ember;

var calData = {};
var rcId = {};

export default Ember.Component.extend({
    calEvents: function(start, end, timezone, callback) {
        // var scheduleData = this.get('scheduleData');
        var scheduleData = calData;
        ...a whole bunch of logic specific to finding events in my data for fullCalendar to display
        callback(eventData); // calling back to fullcalendar with the events to render
    },
    initialize: on('init', function() {
        var self = this;
        rcId = this.get('rcId');
        Ember.$.ajax({
            url: '/my/big/ugly/Url',
            beforeSend: function(request) {
                request.setRequestHeader('Accept', 'application/json');
            },
            dataType: 'json',
            contentType: 'application/json'
        }).done(function(data) {
            self.set('scheduleData', data);
            calData = data;
        });
    }),
    setupFullCalendar: function() {
        this._super();
        var self = this;
        Ember.$('#fullcal').fullCalendar({
            events: self.get('calEvents'),
        });
    }.on('didInsertElement')
});

As you can see, I created two variables rcId and calData and populate them so the function can use them. This clearly is not the Ember way.

If I reference this.get('calEvents') I get an undefined on get since the context isn't the controller, but rather fullCalendar.

What is the ember way??

I know that rendering an Array or Object to a template asynchronously can be achieved with a PromiseArray or PromiseObject, but what's the right way to approach a situation where the thing you want to resolve is a String or Number?

I need some way of returning the {{link-to }} component from a helper. I'm trying to parse a paragraph by replacing all hashtagged words with a link to a specific route and the param as a hashtag. So for example:

// something like
This is a great article about #cats and #dogs, such a great read.

// becomes
This is a great article about {{link-to '#cats' 'search' 'cats'}} and {{link-to '#dogs' 'search' 'dogs'}}, such a great read.

I was wondering if it's possible to do using a simple helper. The only other way I could think of doing this is by using a componenent, splitting the paragraph by hashtagged words, and then looping through the array of parts to return either normal text or a link.

Something I tried - jsfiddle

i have a router that like 400lines of code :-) and i want to be able to write an extention of the router in any folder and then import to the main router, please help

I am setting up a new Ember app with a Node.js backend. I want to get Authentication/Authorization down first and I have successfully setup authentication through facebook using simple-auth and torii so far in the frontend.

My next step is for Node.js Passport to take over and deal with further authentication and authorization in the backend. Is this a logical step or would you use different technologies?

Ember is opinionated but there's certainly room for personal coding styles. Especially now that we're nearing 2.x there's quite a bit of flexibility (mutation, actions up/data down, string actions vs passing functions, components with no controllers, etc). Just curious what it would look like if you were to implement a create/edit form on canary today.

Some background:
I have an app built that loads the first page and I'm not sure how to add infinite scrolling to it.
Given the data-down actions-up principles combined with the idea that the route should handle actions related to updating the model, and the controller should handle actions from the user etc. It seems like the route should be maintaining the state of the count and offset parameters used to issue the store.findQuery command and the controller should know when user needs more data and invoke the actions in the route which should update the model with the next page of data. That being said, I'm just guessing and would be interested to see how other people do this.

An alternative I could think of is to disregard using the model hook completely, and put all of the loading/updating logic into the controller.

Another option I had considered is that i could still split the logic between the route and controller, but I keep the route dumb and let it overwrite the model. Instead of rendering the model directly, I add another array in the controller which it knows to keep appending to whenever the model changes.

Anyways, I'm not sure if the above made sense, but infinite scrolling seems like a trendy UX thing these days and if there is a conventional way to do this in Ember it seems like a good thing to know!

Hope to hear your opinions!

I have a route:

/foo/1/foobar2

That loads data from a web service. In the template it loops through {{#each}} record and builds a up a display. Part of that display (a bootstrap tab) needs data from a different web service that wasn't loaded in the route. This web service needs a value from the {{#each}} record that's the foreign key to lookup and display a small set of related objects.

What's the correct ember mechanism for doing this?

For example,

// addon/components/my-comp.js
var MyComp = Ember.Component.extend...

Ember.Application.initializer({
 name: 'my-comp',
 initialize: function() {
 }
});

export default MyComp;

It didn't work for me but since I don't use ember-cli a lot I am not really sure if this is supported. So is it possible? or one has to create a file in the initializers folder?

Hello!

I have some issues with working together new Ember engine and jqueryui sortable plugin.
My structure (example):

Model Project:

itemSorting: ['sort']
itemSorted: Ember.computed.sort('item_ids','itemSorting'))

Model Item:

project_id: DS.attr('belongsTo', 'project', {async:true})

Template:

{{#jqui-sortable}}
{{#each project.itemSorted as |item index|}}
  {{item-element  index=index }}
 {{/each}} 
{{/jqui-sortable}}

So after sorting - jqui-sortable component sends action to route with new indexes of each item and route saves models and pushes new sort properties to store. So problem is that sometimes glimmer engine doesn't properly rendered sorted list. Indexes inside "each" are correct but display order of items isn't. I think that it caused by dom manipulation of item list (changing order of item (LI) list) by sortable plugin. My question is how to tell glimmer engine to forcev rerender this list (component.rerender() doesn't help)?

I am working on an application that receives a lot of different events from a remote server, but I am not completely sure of what is the best way to handle them (for example I have a list of things that is updated when the application receives an event from a remote server and I would like to update the number of items). Should I use different components to keep the related events handlers separated, should I use several helpers, several controllers?

Thank you.

I used to do the following:

  var controller = Ember.Controller.create({
    name: 'templateToString'
  });

  var view = Ember.View.create({
    template: template,
    controller: controller
  });

  view.createElement();
  return view.element.innerHTML;

But I am not sure if this method is still reliable.

Using Ember-CLI 1.13.1. I have two radio buttons on the page

{{input type="radio" name="order_size_type" id="order_size_in_cm" checked=true}}
<label for="order_size_in_cm" {{action 'showFieldsCM' preventDefault=false}}>Cm</label>
{{input type="radio" name="order_size_type" id="order_size_in_ft"}}
<label for="order_size_in_ft" {{action 'showFieldsFT' preventDefault=false}}>Ft/In</label>

I have created two functions which simple add the hide class based on what label is clicked

There are two questions

1. By default no radio box is checked, even I have checked=true
2. action is applied on the Label, and it is working but when I apply that on radio it is not working

So right now I have to click the label to hide/show the content

Your hair in your gh pic (https://github.com/taras) is much longer than it was last time I saw you, I think you should grow it out. I think you could pull off Aragorn quite well:

I am working on ember application using ember-cli.

ember version is "2.0.0-beta.2"

I am integrating the foundation 5 in application, installed bower package for foundation and also included it in ember-cli-build.js file

app.import('bower_components/foundation/js/foundation/foundation.js');
app.import('bower_components/foundation/js/foundation/foundation.offcanvas.js');

Now i want to initialize the foundation as

Ember.$(document).foundation({
  offcanvas: { close_on_click: true }
});

But in ember-2 they have removed views completely, where should i initialize it?

Any thoughts?

Thanks.

This is the question connected with #23. Ember or Front-end focusing is preferred.
PS Do not worry, this is the last my question about looking for a job :)

Please discuss the differences between the old serializer api and the new serializer api and discuss how to migrate a model from the old api to the new api.

There are many jobs with a such requirement "... good knowledge of at least one framework, i.e.: AngularJS, Ember.js, Backbone.js".

I personally know ember, and I'd like to develop ember-cli apps. What should I expect from such a job? I see many options:

• Company is large, there are many projects for every javascript framework. (But why not to choose the best one ?)
• If you know at least one of them, you will quickly learn others. (I think you'll need 1-2 month to learn ember (on ember-cli with ember-data) and produce production-ready code and tests, because of many gotchas. And also will company wait till I learn AngularJS and Backbone.js?)
• We really work with AngularJS only, but we like to collect front-end developers CVs.

Thank you for answer!

I have integrated Foundation into an app and most things work well. However, when I use the dropdown component from Foundation (http://foundation.zurb.com/docs/components/dropdown.html) in an Ember component, Ember begins to stop working.

For example, if I create a component "my-button" which renders a dropdown component, as long as the content within the dropdown are href's the dropdown's content works. But when I change the content within the dropdown to use standard click actions, the actions are never fired. Here is an ember-twiddle example that does not work. http://ember-twiddle.com/9bd863d32b2257663c57

As you can see all the logic is self contained inside of the component. When the rendered dropdown content is clicked, an action "componentAction" should be fired within the component itself. That action in turn should be display an alert. However that action is never fired upon click.

Any idea what would cause embers actions to stop working?