lundi 1 février 2016

How to use auth in emberfire with torii intergrated

As per this merge torii has been merged into emberfire. There isn't much on the google about how to use it though. I've tried to look at some of the integration tests in emberfire to figure it out, but to no avail.

I'm looking for an implementation similar to the old approach, or really just anything that works:

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel: function() {
    return this.get("session").fetch().catch(function() {});
  },
  actions: {
    signIn: function(provider) {
      this.get("session").open("firebase", { provider: "google"}).then(function(data) {
        console.log(data.currentUser);
      });
    },
    signOut: function() {
      this.get("session").close();
    }
  }
});

Where you can the use session in your .hbs templates. Can anyone point me in the right direction / give an example?




Is there a supported Ember-cli addon for Polymer?

I'm fairly new to both ember-cli and polymer so bear with me.

My problem here is that I am trying to use Polymer webcomponents within my ember-cli project, however I have not been able to find an add-on or solution that works with the current versions of ember, ember-cli, and polymer that I have (all of which are the latest versions).

I have tried the ember-polymer, ember-cli-polymer, and ember-cli-polymer-toolchain addons on npm for emebr-cli and none have worked. Below is the code that I have included in my brocfile.js and I have already checked that I have installed the correct dependencies needed to vulcanize and merge the files i need.

Is there an official addon supported by the ember team, or is there simply no supported way to accomplish this. It would be a shame to not be able to include polymer's webcomponents in my projects.

Thanks in advance for your help.

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles   = require('broccoli-static-compiler');
var mergeTrees  = require('broccoli-merge-trees');
var vulcanize = require('broccoli-vulcanize');

var app = new EmberApp();

var polymer = pickFiles('bower_components/', {
  srcDir: '',
  files: [
    'polymer/polymer.html',
    'polymer/polymer.js',
    'webcomponentsjs/webcomponents.js'
  ],
  destDir: '/assets'
});

var polymerVulcanize = vulcanize('app', {
  input: 'elements.html',
  output: 'assets/vulcanized.html',
  csp: true,
  inline: true,
  strip: false,
  excludes: {
    imports: ["(^data:)|(^http[s]?:)|(^\/)"],
    scripts: ["(^data:)|(^http[s]?:)|(^\/)"],
    styles: ["(^data:)|(^http[s]?:)|(^\/)"]
  }
});

module.exports = mergeTrees([
  polymerVulcanize,
  polymer,
  app.toTree([polymerVulcanize])
]);



How to create list from model's object properties?

I have a model:

var Project = DS.Model.extend({
  title:                DS.attr('string'),
  description:          DS.attr('string'),
  full_description:     DS.attr('string'),
  category:             DS.attr('string')
});

and I try to create a list that contains only category properties of all project instances in a model. And I try to do this in the following way, as a property on a controller:

  projectTitles: Ember.computed('model', function() {
    var projects = this.get('model');
    return project.map((project) => {
      return project.category;
    });
  })

But it doesn't work and due to small experience I can't figure out why. I need some help.




Uncaught NOT_FOUND_ERR: NOT_FOUND_ERR: DOMException 8 in Ember while using plupload

while using plupload component in ember it seems an error on console, and plupload nor working

Instantiating FileInput...

moxie.js:3027Uncaught NOT_FOUND_ERR: NOT_FOUND_ERR: DOMException 8

i refered link

thank you in advance!




dimanche 31 janvier 2016

Filtering with Slugs in Ember.js

I have two models - make and car. I have an application that shows all of the makes (manufacturers) and then another model that shows the models or cars. I have set up dynamic segment for slugs in the URL and I want to filter the makes by the slug which happens to be the niceName property.

route make.js

import Ember from 'ember';

export default Ember.Route.extend({

  model(params) {

    // find make by niceName using params.slug
    const niceName = params.slug;

    // find cars by make
    return this.store.filter('make', function(item) {
      return item.get('niceName') === niceName;
    }).then( function(result) {
      console.log( result.get('niceName')); // undefined
    });

  }

});

I have checked and it does correctly match those items with the same niceName. I can check the length and if I play with the value of niceName, it does change the length of what is returned.

The problem is that what is returned doesn't have any of the properties. If I attempt to show this in the view, it returns undefined as well.

What is filtering returning?




Process for sending ember-intl yaml files to translaor

We're just about to start using ember-intl, a wrapper for formatjs, to handle our multi-language web app. The English language file is being constructed in yaml format, though we could equally well use json. It's an implementation of the ICU Message format An example of the yaml is:

product:
  info: '{product} will cost {price, number, EUR} if ordered by {deadline, date, time}'
  title: 'Hello world!'
  html:
    info: '<strong>{product}</strong> will cost <em>{price, number, EUR}</em> if ordered by {deadline, date, time}'
blog: 
  title: 'My new blog'

Is there a canonical way of transforming this data to be handed to professional translators?

I know they use POT/PO in the GetText process, but no idea if I should be just shipping these yaml files, or doing some preprocessing first.




`SCRIPT` tags are not allowed in HTMLBars templates

Hi there and thank you for clicking my question.

I have just upgraded my application to the latest ember-cli release (2.3.0-beta.1) and now one (or more) of my templates messed with the build. What coming next seems like a trivial issue, yet I never fully got around to it very well, so I'm finally asking.

As the title suggests, I previously had <script> tags in my templates for minor things, such as a small jQuery conditional append() or anything doable by 2 or 3 lines of code. I never considered that enough motivation for creating a view, but in the meantime s**t got serious.

So, given the following snippet, what would be the recommended approach for keeping its functionality intact? Please do not mind the logic and motivation behind this specific code fragment, it's just an example:

<div class="container">
  <div class="row">
    <div class="col s12 valign-wrapper">
      <img class="materialboxed radius left" width="100" src="/default_avatar.jpg" alt="" />
      <h3>Welcome, Sarah Connor!</h3>
    </div>
  </div>
  <div class="row">
    <div class="col s12">
      {{outlet}}
    </div>
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function(){
     $('.materialboxed').materialbox();
  });
</script>

Anything that won't break the existing (and anticipated?) conventions would do at this point. Thing is, I kept reading stuff on this subject but nothing had a clear stand on it, plus some quick hacks I suspect to be avoiding the conventions in use, therefore I wouldn't go for it.

I am well aware documentation is still young for anything 2.x in ember-cli and still has a long-ish road ahead. I might be able to help with it, once I figure out what to do myself.

Since this is a question that's 50/50 real issue and discussion on good practices, I'm considering posting on discuss.emberjs as well, if SO won't bring up any applicable solution / define the concepts behind in a clearer way.