jeudi 25 juin 2015

Removing appended forward slash from URL in Ember.js when using link-to

Everyone! I am new to ember and am liking it so far but I am hoping someone can help me with the URLs in my site.

I can load a template in ember using a url that looks something like this:

www.test.com/#home

and it will load up the home template, no problem.

But if I use a link-to home from inside the site, the URL will look like this:

www.test.com/#/home

I want the links to always look like the first example. Any ideas?




ember testing component with yield

I cannot get the compiled html to be inputted into the component via the yield block expression. See test:

import { moduleForComponent, test } from 'ember-qunit';

moduleForComponent('pro-tab-link', 'Unit | Component | pro tab link', {
  // Specify the other units that are required for this test
  // needs: ['component:foo', 'helper:bar'],
  unit: true
});

test('it renders', function(assert) {
  assert.expect(3);

  // Creates the component instance
  var component = this.subject({
    template: Ember.Handlebars.compile(
      "<h1>Hello world</h1>"
    )
  });

  console.log(component);
  assert.equal(component._state, 'preRender');

  var $component = this.append();

  Ember.run(function() {
   component.set('isOpen', true);
 });

  console.log(component);
  console.log($component.html());

  assert.equal(component._state, 'inDOM');
  assert.ok(component.isOpen);
});

And the template:

if isOpen
  == yield

For some reason, the h1 tag is not being passed into the yield of the component. How do I get this working?




Emberjs bidirectional communication - how?

I'd like to build a chat application using Emberjs. For that I'd like to make a bidirectional communication between computers/server. Kinda like using WebSockets.

How do I go about doing this in Ember? Does it have any built in facilities to make this type connection?

Many thanks.




How to remove and object from an array in Ember

I don't understand why the object is not removed from the array. I tried to implement this solution Ember.js how to remove object from array controller without ember data but the object is not removed from the previousParent.

changeCauseLinkParentRt(newParent, causeLink) {
  if(!newParent) {
    causeLink.get("parent").then(previousParent => {
      previousParent.get("children").then(children =>{
        var _newParent = children.findBy("order", causeLink.get("order")-1);
        if(!!_newParent) {
            var objRemove = null;
            previousParent.get("children").then(children => {
              objRemove = children.findBy("id", causeLink.get("id"));
              children.removeObject(objRemove);
              children.save();
              causeLink.set("parent", _newParent);
              causeLink.save();
              _newParent.get("children").pushObject(causeLink);
              _newParent.save();
            });
          }
        });
      })
  } else {
    //...
  }
},




How to configure routes in a Chrome extension using Ember CLI?

We are developing a Chrome extension using Ember CLI, but are having difficulty getting the routes/resources to play nicely with Chrome as the Index route is not being fired correctly.

The steps we have taken:

  • Create the default application using Ember CLI: ember new myapp
  • We do not define any routes as we should get the Index generated for us
  • Build: ember build --environment production
  • Put a manifest.json file to define the extension in the dist/ folder
  • In Chrome we 'Load an unpacked extension...' and point it to the dist/ folder

Normally, if the Ember application was hosted on a server, going to where Ember serves the application, like hxxp://localhost:4200/, would load the application and all routes would hang off that.

However, as it's a Chrome extension, it doesn't load the index.html when using the empty route, such that going to http://chrome-extension(extension_id)/ gives an error 'This webpage is not found' as I presume Chrome doesn't redirect to index.html by default.

If you point the extension to http://chrome-extension(extension_id)/index.html it loads the Ember application, but then Ember gives an error:

Uncaught UnrecognizedURLError: /index.html

One way round this is to define an 'index.html' route in the router as below, but this isn't ideal:

Router.map(function() {
      this.resource('index', { path: '/index.html' });
});

Is there a way to correctly define the routes?

Any help would be very much appreciated!




How to use forEach in Ember inside firebase push()

I had a function that was saving multiple todos to a list.

        list.save().then(function(list) {
              list.get('todos').then(function(todos){
                todos.forEach(function(todo){
                    todo.save();
                });
              });
            });

user.get('todos').then(function(user){
user.save();
)};

But now I'm using Firebase to store session.uid, so I need to use instead

    ref.child('lists').push({
        user: uid,
todo: this.get('todo')

    });

But it doesn't work. (Also I don't know where forEach from the previous version of code fits in here). I've tried

todo: this.get('model.todo')

as well. I think it's because of the way todos are added (I'm saving todos only after list is saved because of parent-child relationship)

addTodo: function() {
    var user = this.controllerFor('application').get('model');

    var todo = this.store.createRecord('todo', {
        title: this.get('model.todos.title'),
        user: user,
    });

    var list = this.get('model');

    list.get('todos').pushObject(todo);  

I'm getting the error

Firebase.push failed: first argument contains undefined in property 'lists.todo'

Any help would be appreciated!




Add backburner debug to ember-cli project

Ember guides suggest adding Ember.run.backburner.DEBUG = true; to you app in order to get better stacktraces. Where should this line be added in an ember-cli project? I'm currently using ember-cli 0.2.5