vendredi 26 juin 2015

Using the result of a promise in Ember.RSVP.hash

I've been pulling out my hair with this for a few hours now so I thought I'd just ask :)

In a route, I'm grabbing the account ID from the session store:

var accountId = this.get('session.currentUser').then(function(user) {
  return user;
}).then(function(user) {
  return user.get('account');
}).then(function(account) {
  var accountId = parseInt(account.get('id'));
  console.log(accountId); // outputs 2
  return accountId; 
});

I'm also returning an Ember hash of layouts using a (presently) hard-coded ID:

return Ember.RSVP.hash({
  layouts: this.store.query('layout', { account_id: 2 }) 
});

/* {{log layouts}} in the template returns the correct list of layouts */

However, when I try and use the value of the first promise in the hash, as follows:

return Ember.RSVP.hash({
  layouts: this.store.query('layout', { account_id: accountId })
});

I get the following error:

You must pass a resolver function as the first argument to the promise constructor

TypeError: You must pass a resolver function as the first argument to the promise constructor

I can almost understand this, as perhaps the accountID promise isn't resolved before the hash function is called.

But then I tried:

var _this = this;
var accountId = this.get('session.currentUser').then(function(user) {
  return user;
}).then(function(user) {
  return user.get('account');
}).then(function(account) {
  var accountId = parseInt(account.get('id'));
  console.log(accountId); // outputs 2
  return accountId;
}).then(function(accountId) {
  console.log(accountId); // outputs 2
  return Ember.RSVP.hash({
    layouts: _this.store.query('layout', { account_id: accountId })
  });
});

This does not give any errors, but {{log layouts}} in the template returns 'undefined'.

Can anyone help, please?




Rendering hundreds of datas : lazy loading, partial rendering?

I can seem to find a good answer for my problem. I have a sidebar template which contains a div for each item my model contains. When I have hundreds of items to render, it takes up to 8-10 seconds to render the template. I am using ember-data.

How can I render the items that are loaded before it finishes fetching the entire model?

Here is my template :

{{#each conv in model itemController='singleconv'}}
        {{#if (equals conv.url selectedSubuserEmail)}}
            <div class="conversation-content-wrapper" {{action "clickConv" conv preventDefault=false}}>
                    <div class="history-message-assigned in-progress-closed" style="display:none;"><p><i class="icon-x"></i>Conversation closed</p></div>
                    <div class="history-message-assigned in-progress-assignation" style="display:none;"><p><i class="icon-assign"></i>Conversation assigned</p></div>
                    <div class="history-message-assigned in-progress-reopen" style="display:none;"><p><i class="icon-re-opened"></i>Conversation re-opened</p></div>          
                <div class={{conv.selectedClass}}>          
                    <div class="conversation-time-history">{{{conv.status}}}</div>
                    <div class="conversation-details">
                        <span class="unread-numbers"></span>
                            {{input type='checkbox' class='chk-conversation' checked=conv.isChecked}}
                             <span class="conversation-name">{{conv.customer.name}}</span>
                             <span class="phone-number">{{conv.customer.cellPhoneNumber}}</span>
                            <p class="conversation-text">{{conv.lastMessage}}</p>
                    </div>
                </div>                       
            </div>
        {{/if}}
{{/each}}




Ember render not calling parent component

When a component is rendered inside an outlet from the app route it is not calling(may be not even creating an instance) of PARENT component. Whereas if its rendered inside a template it works fine. Please see the JS Bin below, its self evident.
JS Bin for problem . First it renders inside a template, click on show modal and you will see the issue.

Not sure if i am doing something wrong here. Thanks in advance.




Ember: Dynamically created component actions don't fire

I'm having trouble with {{actions}} on Ember (1.11.0) components not being triggered when the component has been added to the page dynamically. Oddly enough, it seems to be related to how the ember application has been added to the page - via the default template vs. added to a "rootElement".

Working JSBin: actions are triggered

Non-Working JSBin: actions aren't triggered

My Component Definition:

<script type="text/x-handlebars" data-template-name="components/foo-bar">
    <p>Component {{name}}</p>
    <button {{action "doIt"}}>Do It</button>  
</script>

App.FooBarComponent = Ember.Component.extend({
    click: function() {
        console.log('click fired! - ' + this.get('name'));
    },
    actions: {
        doIt: function() {
            console.log('doIt fired! - ' + this.get('name'));
        } 
    }
});

The click() event and doIt() action aren't triggered when the component has been added to the page dynamically. I'm using append() method to add the component to the page:

App.IndexController = Ember.Controller.extend({
    count : 1,
    actions: {
        createNewFoobBar: function() {
            this.set('count', this.get('count') + 1);
            var comp = this.container.lookup('component:foo-bar');
            comp.set('name', this.get('count'));
            comp.set('controller', this);
            comp.append();
        }
    }
});

In either case, actions are properly triggered when the component is part of the template:

{{foo-bar name="one"}}




ember-i18n : TypeError: app[initializerType] is not a function

I've been installing ember-i18n on a working Ember project. (http://ift.tt/1kRLqqq)

After registering an initializer app/initializers/i18n.js :

export default {
  name: 'i18n',

  after: 'ember-i18n',

  initialize: function(_, app) {
    app.inject('model', 'i18n', 'service:i18n')
  }
};

And relaunching the server, I get this error in the console :

app[initializerType] is not a function

Do you have any idea ?




Stop changes propagation until save button is clicked in ember.js

My desired scenario is that the value entered into a bound input field shouldn't propagate to the model until save button is clicked. I found this topic: Emberjs: Prevent changes propagation throughout a transaction however it's quite old. Is there another way to accomplish this?




jeudi 25 juin 2015

ember.js runtime resolver not working

I'm new to ember.js (but I know MVC from my CakePHP experiences and JS as well) and in the last 2 weeks I build a little app at work which loads sideloaded JSON data with the REST-Adapter. I added some buttons with actions and everything works fine and I learned a lot, but it takes time to figure out the details.

All my controllers, routes and models are not organised at the moment in a folderstruture which is described in the ember.js-Guide: http://ift.tt/1fIkmtN

Now I want to move the files to the folderstructure. But then the application does not work. It seems to my that the resolver can not finde the files at runtime. But why?

An easy example which does not work:

in "app.js" (loaded with -tag in "index.html"):

App = Ember.Application.create({
    LOG_RESOLVER: true // just for debugging
});

in "router.js" (loaded with -tag after "app.js" in "index.html"):

App.Router.map(function(){
  this.route('mytest');
});

in "routes/mytest.js":

export default Ember.Route.extend({
  setupController: function(controller) {
    controller.set('title', "Hello world!");
  }
});

in "controllers/mytest.js":

export default Ember.Controller.extend({
    appName: 'mytest'
});

in "indes.html":

<script type="text/x-handlebars">
    {{#link-to 'mytest' }}Mytest{{/link-to}}<br/>
    {{outlet}}
</script>
<script type="text/x-handlebars" id="mytest">
  mytest Template
  <h1>appName: {{appName}}</h1>
  <h2>title: {{title}}</h2>
</script>

The Handlebar-template "mytest" is showen, but {{appName}} and {{title}} are empty. If I moved the "mytest"-Template to "templates/mytest.hbs" nothing is showen.

Seems to my that the resolver does not work. Or something wrong with the naming-conventions Guide?

My another assumption: Resolver-Stuff only works when using a buildprocess like in ember-cli.

Using "ember-1.12.1.debug", "ember-template-compiler-1.12.1"

Thanks for help.