ember.js , ember static filter with query params


ember static filter with query params

Question:

Tag: ember.js

I have a list of posts and I need filter by social_network, I'm using query params to filter, my question is how temporary filter the model so that later I can come back to show all

route posts.index with:

model(params) {
    return this.store.find('post');
  }

and also a controller for it:

export default Ember.ArrayController.extend({
  queryParams: ['social_network'],
  social_network: 'all',

  paramsDidChange: function() {
    var network = this.get('social_network');
    var posts = this.get('model');

    if(network === 'all') {
      return posts;
    }
    return posts.filterBy('social_network', network);
  }.observes('social_network', 'model'),
});

view:

{{#each post in model}}
    <li>
      {{post-index post=post}}
    </li>
  {{/each}}

Answer:

Instead of using an observer - just use a computed property in the controller and loop through the computed property in the template.

Your computed property in the controller would look as follows:

filteredStuff: function() {
  var network = this.get('social_network');
  var posts = this.get('model');

  if(network === 'all') {
    return posts;
  }

  return posts.filterBy('social_network', network);
}.property('social_network')

Then, in your template:

<script type="text/x-handlebars" data-template-name="index">
  <ul>
  {{#each item in filteredStuff}}
    <li>{{item.title}}</li>
  {{/each}}
  </ul>
</script>

Working solution here


Related:


Sorting data by timestamp on ember


ember.js,ember-data,ember-cli
I've looked at a few examples, but haven't been able to reverse-sort, so that newly generated objects are on top. My sortable items are in components, and I don't think I'm passing sortProperties & sortAscending correctly. lavender.js: export default Ember.Controller.extend({ needs: ['application'], sortProperties: ['timestamp'], sortAscending: false }); lavender.hbs {{#each model.comment...

Ember Simple Auth - injecting current user into every route


ember.js,dependency-injection,ember-simple-auth
I am building a site using Ember Simple Auth. I followed these instructions to try and add the current user object to the session and it worked, using this slightly adapted code: import Ember from 'ember'; import Session from 'simple-auth/session'; export default { name: "current-user", before: "simple-auth", initialize: function(container) {...

How to make Ember Cli Mirage to work with Ember Simple auth


javascript,ember.js,oauth-2.0,ember-simple-auth,ember-cli-mirage
For development and testing I want to use Ember CLi Mirage. I'm trying to get it to work with simple auth and oauth2. How do I have to set up Mirage to work with a session token? This is what I'm doing so far: import Ember from 'ember'; export default...

ember model rendering strange behaviuor


ember.js
While experimenting with ember and ember-localforage-adapter I noticed a strange behaviour. ember.debug.js:4888DEBUG: Ember : 1.12.0 ember.debug.js:4888DEBUG: Ember Data : 1.0.0-beta.18 ember.debug.js:4888DEBUG: jQuery : 1.11.3 I have three models: /app/models/ledger.js import DS from 'ember-data'; export default DS.Model.extend({ title: DS.attr('string'), purchases: DS.hasMany('purchase', {async: true}), players: DS.hasMany('player', {async: true}), }); /app/models/purchase.js import DS...

Ember.js binding to and saving belongsTo property


ember.js,ember-data
I have two models related to one another via belongsTo (a reciprocal relationship, i.e. 1:1) utilizing the async property. Having retrieved one record and setting it to the Model on the router, I have access to the properties in the main record and its associate—everything works fine there. I've used...

How to get the clicked element on Ember Component


ember.js,ember-cli
I'm learning EmberJS, I tried to search the docs and stuff but I couldn't get it right so far I've implemented the component and a action to respond on click event, for now it just print something in the console. I want to get the clicked element so I could...

What are Element Style Components and What are Fragment Style Components?


javascript,ember.js
I would like to know the difference between Element Style Components and Fragment Style Components ,precisely what is meant by Element Style Components and what is meant by Fragment Style Components? Thanks in advance.

Emberjs get facebook friendlist


facebook-graph-api,ember.js,ember-data
I'm using Emberjs, Ember Simple Auth, and Torii (for the facebook-oauth2 provider). I was able to create a Facebook login and logout following this tutorial http://www.programwitherik.com/ember-simple-auth-torii-example-application/ For learning purposes, I'm trying to get my Facebook friendlist using the Ember Simple Auth and Tori not sure how to set up the...

Refactoring Computed Properties on Ember.js 1.13


ember.js
I was able to upgrade most of my Ember.js project to 1.13 after having some issues along the way, but now I can't wrap my head around the following deprecated code: filteredPosts: function(){...}.property('var1','var2','var3') When I enable it, the only notice that I receive is: Uncaught TypeError: controllerClass.proto is not a...

Ember self-reference and polymorphism


ember.js,ember-data
there is a user model which also relates to itself as contact so user has_many contacts. Than each contact has and belongs to many "groups". Both user and contact has one address. I read through http://lukegalea.github.io/ember_data_polymorphic_presentation/#/ couple of times, but yet still do no understand how to setup { user...

How to run action in Ember Controller afterRender


ember.js,ember-data,ember-cli
im new to ember framework. I just want to execute a function that defined inside the actions hook when the rendering completes. var Controller = Ember.Controller.extend({ actions: { foo: function() { console.log("foo"); } } }); Ember.run.schedule("afterRender",this,function() { this.send("foo"); } but the above code not working. I just want to know...

How do you force Ember to rerender a component?


javascript,jquery,ember.js
I have an Ember component that uses jQuery to add a canvas chart. When I change routes, I get a new model, but Ember's automatic rerendering does not work in this case. In fact, I don't know how to make the component code which adds the chart re-run at all....

Fetching API data from Ember Controller


ember.js,ember-data,ember-cli
I am an Ember newbie and am trying to create a simple application to fetch records from an API server. Currently I am trying to query the this.store.find('validemail',{'email':'abc.gmail.com'}).then(function(response){ console.log(response); }); //Console log on browser Class {query: Object, store: Class, manager: Class, isLoaded: true, meta: Object…}__ember1434866946710: "ember592"__ember_meta__: Object__nextSuper: undefinedcontent: (...)get content:...

Emberjs advanced sort hasMany association as a computed property


sorting,ember.js,has-many,computed-properties
I have asked a variant of this question here. But basically I need to create a computed property that operated on a hasMany association. I need to do sorting similar to the javascript sort function; where I can do something like files = ["File 5", "File 1", "File 3", "File...

Bind more controller properties to one attribute using HTMLBars


ember.js,htmlbars
is this correct or is there any other solution? <input disabled={{model.isnValid}} disabled={{isSaving}}> I know that I can create new CP and depend on model.isnValid and isSaving, but I want to know if there is any other solutions. Thank you for advices...

Ember.js - Rendering additional data for a model


javascript,ember.js,ember-data
I have an app model and apps have an id and name. this.resource("apps", function() { this.route('show', { path: ':app_id' }); }); I'd like to make the show view show metrics about the app, but the query is pretty intense, so I don't want to include it in the call to...

How to properly unbind jQuery window event handler in Ember component


jquery,ember.js
I know that the best practice for binding an event handler to a window event with jQuery is jQuery(window).on('resize', Ember.run.bind(this, this.handleResize)); If you try to unbind the event handler though in willDestroyElement with $(window).off('resize', this.handleResize); this doesn't work because .on() and .off() must be called with the exact same reference...

ember-data stores a string instead of a number


ember.js,ember-data
In my ember app I want to reuse a model attribute as soon as the form is submitted. But the store seems to keep it as string unless I reload the whole route. I am using this and the following components: Ember : 1.12.0 Ember Data : 1.0.0-beta.18 jQuery :...

Model from Ember Data not rendering


javascript,ember.js,ember-data
I'm trying to figure out how to fetch data with Ember Data and render. After several problems I got to this point where I get no error on the console but the store is empty after the data is loaded. window.App = Ember.Application.create(); App.IndexRoute = Ember.Route.extend({ model: function(){ return this.store.find('games');...

return first element from array as computed property from Ember controller subclass


javascript,arrays,model-view-controller,ember.js
I am trying to return the first element of my array as a computed property to my template from my controller. My code is below. I am 100% about my array and template. Problem is my syntax about in the controller. Basically my array is works made of Work objects....

ember 2.0, Cordova and onDeviceReady


cordova,ember.js
The code in app.js looks like this: var App; Ember.MODEL_FACTORY_INJECTIONS = true; App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, Resolver: Resolver }); export default App; How do I use deferReadiness and advanceReadiness here ? I need this to call advanceReadiness if the cordova deviceReady event is fired. ...

Unbind an event bound with Ember.run.bind?


ember.js
I have a component that has to react to viewport changes. The naive approach would be to just bind a jQuery resize listener, but that could mess with the Ember run loop. The best practice approach is to use Ember.run.bind This works just fine, but I wonder how to unbind...

What's the best way to map objects into ember model from REST Web API?


json,rest,ember.js,asp.net-web-api,ember-data
The topic of this post is: my solution is too slow for a large query return. I have a Web Api serving REST results like below from a call to localhost:9090/api/invetories?id=1: [ { "inventory_id": "1", "film_id": "1", "store_id": "1", "last_update": "2/15/2006 5:09:17 AM" }, { "inventory_id": "2", "film_id": "1", "store_id":...

Polymer 1.0 in Ember-cli, wrong appearance


javascript,ember.js,polymer,frontend,ember-cli
I have managed to integrate Polymer 1.0 to my Ember-cli project. This my Brocfile var vulcanize = require('broccoli-vulcanize'); var pickFiles = require('broccoli-static-compiler'); var mergeTrees = require('broccoli-merge-trees'); var EmberApp = require('ember-cli/lib/broccoli/ember-app'); var app = new EmberApp({ compassOptions: { sassDir: "app/styles/main", outputStyle: 'expanded' } }); //app.import("./bower_components/webcomponentsjs/webcomponents-lite.min.js"); var polymerVulcanize = vulcanize('app', { input:...

Access Properties of JS Object on Controller


ember.js,handlebars.js,javascript-objects
I have created an Ember.JS application where I hang some properties on the ApplicationController that need to be accessible form all over the app. One of these properties is queue (a JS object) broken down by server names (JS arrays). In my template I would like to list the items...

In Ember 1.13 and later what key should I use with each when iterating over an array of strings?


ember.js,ember-cli
In Ember 1.13 the following code generates a warning: {{#each widgetNames as |widgetName|}} {{component widgetName removeWidget="removeWidget"}} {{/each}} Where widgetNames is an array of strings in a parent controller. widgetNames: [] In Ember 1.13 I now get this warning: WARNING: Using {{each}} without specifying a key can lead to unusual behavior....

computed property that changes its value with action in Ember.js


javascript,ember.js,controller
I do have a controller that has an action {{loadRight}} that passes the current model to the controller when I click a button. When I first load the app, I also use firstElement computed property which pulls the first element from my model array. Basically what I want to do...

Ember: How to get computed properties from a nested model?


ember.js,ember-cli,rsvp-promise
First: I have no idea how to work with promises in Ember.js. I want to call a property of my controller which depends on async model-data which is also nested. Also, my model looks something like that: +-------------+         +------------+ | Method      | hasMany |  Practice  | |             +--------->            | |             |         |            |...

ember build Parse error on line 1: {{#each messages as |message|}}


ember.js,ember-cli
Hi I was attempting to update my ember cli project from ember 1.8.1 -> 1.9.1 & handlebar 1.3.0 -> 2.0.0 however now I get the following error, when I use the command ember build : Build failed. File: ui/templates/components/ember-notify.hbs Parse error on line 1: {{#each messages as |message|}} {{#vie --------------------^...

Mapping Ember methods to API


ember.js,ember-data,rails-api
I'm using Ember Data with a Rails API and am wondering how I can map specific actions from Ember to the API. For example, in looking at the Ember docs for deleteRecord and destroyRecord I see no mention of how these methods are translated to the backend. Is this configured...

Reference RSVP hash from inside the same hash


ember.js,hash
I'm trying to load two different models on the same route, I found a stack overflow that explained I can use Ember.RSVP.hash() to get this done, here is what I've done to make it work. model: function(params) { return Ember.RSVP.hash({ flyer: this.store.find('flyer', params.flyer_id), images: this.store.find('image', '-Jrgar1tSArUw-_PiJqX') }); }, As you...

How to set the i18n.locale from within an initializer


ember.js,ember-cli,ember-i18n
I would like to set 'i18n.locale' from within an initializer in EmberJS. I am using 1.12 via Ember-CLI with ember-i18n. I tried this import Ember from 'ember'; export function initialize(container, application) { Ember.set('i18n.locale', 'de'); } export default { name: 'user-locale', initialize: initialize } but am receiving Assertion Failed: Path 'i18n.locale'...

Ember 1.13, view lookup


javascript,ember.js
Prior to ember 1.13 i was using var containerView = Em.View.views[view_id]; to get the ContainerView instance with the view id and manually adding childViews to this container view, which used to work just fine. As of ember 1.13 this view lookup is not supported. What is the recommended way of...

Recreate Similar Travis CI Console Log Interface


css,ember.js,travis-ci
The first time I saw the Travis CI live updating build console log, I was, I'll admit, nerdily impressed. And I know with some very time consuming CSS styling and JS coding, I could probably get something half as nice. But, my question is, are there any libraries out there...

Custom API calls with Ember Data


ember.js,ember-data,ember-cli
I don't know if this is possible with Ember data, although I am kind of doubtful, but the API I am working with supports being able to produce 'or' queries by hitting URLs like, /v1/subjects?first_name||last_name=*dr* this would result in a query that looks like select * from subjects where first_name...

How to get data out of ember objects


javascript,ember.js,kendo-grid
I'm fairly new to ember and I'd like to know whats the fastest way to extract the data out of ember objects. I've loaded my model with a very large amount of records using this.store.find('modelName);` in my route. I created a component on my view using {{kendo-ui.kendo-table descriptor=tableDescriptor data=model}}. My...

Can we access Ember.TEMPLATES in controller?


javascript,templates,ember.js
Is it possible to use Ember.TEMPLATES to check the existence of a template within a controller or component? I am using v1.12.1 We are currently transitioning to a route that is rendering a template that may not exist. Prior to the transition, we need an existence check of the template...

Zurb Foundation tooltip stays on the screen


ember.js,zurb-foundation-5
zurb foundation tooltip stays on the screen after component removal/insertion: http://emberjs.jsbin.com/jutapilune/2/edit There is a number of hacks floating around, but I wonder - maybe Ember community has resolved that issue already? ...

Connect to a RESTful service which ends all URLs with an “/”


ember.js,ember-data
I have to connect to a RESTful service that ends every URL with an "/". The list of products is at http://company.com/api/products/ And the product with the ID 1 is at http://company.com/api/products/1/ This is my current app/adapters/products.js import DS from 'ember-data'; export default DS.RESTAdapter.extend({ host: 'http://company.com', namespace: 'api' }); Is...

Can ember-cli watch and build automatically without running the server?


ember.js,ember-cli
Title is pretty much my question. I'm serving the dist directory differently and would still like the benefit of auto-builds but I don't need to run the server. I looked in the docs and the cli help but didn't see anything specific. I know the cli help doesn't contain everything...

Bootstrap table's styles messed up when used with Ember.js


html,css,table,ember.js,bootstrap
I work with bootstrap. When I create a table in plain HTML, bootstrap's table styles are applied as expected. But, when I insert the same HTML into an Ember.js template, the bootstrap's table styles don't seem to apply (e.g. table borders, paddings and stripes are not present). Fiddle: http://jsfiddle.net/5evymbou/ Plain...

When creating a new data object in Ember that relies on another object how do you pass it along?


ember.js,ember-cli
I am on a page where I can see a specific customer, part of my router.js is: this.route('customers'); this.route('customer', {path: "customers/:customer_id"}); this.route('customer.order.create', { path: "customers/:customer_id/order/create" }); customer.order.create needs to load in my main view and so is not nested. An order 'has a' customer. I've setup my /customer/order/create controller to...

Ember passing a model to transitionToRoute


ember.js,ember-cli,ember-router,ember-controllers
I'm using Ember-cli with ember 1.11 I'm trying to use the transitionToRoute method in a controller to transition to a route and feed it a dynamically generated object as the model. Here's my controller: import Ember from 'ember'; export default Ember.Controller.extend({ actions: { launch_scanner: function(){ console.log('launch_scanner'); var model = {name:...

How do I communicate the form parameters from the template to the route in ember.js?


forms,ember.js
I have a form like this in a template: <form {{action 'add' on='submit'}}> <label for="name">Name</label> {{input value=name placeholder='Enter name' required="required"}} </form> Then I have the following route: import Ember from 'ember'; export default Ember.Route.extend({ actions: { add: function() { alert(this.get('name')); } } }); The alert is fired, but the output...

Ember Data “modelFor” error when serializing models


ember.js,ember-data,ember-cli
I am using ember 1.13, ember-cli and ember data 1.19.1 and I am experiencing an error that is difficult to track down due to being unspecific. The error occurs when I do the following: this.get('model').forEach(function(mymodel) { applications.push(elavonApplication.serialize({includeId: true})); }); where "elavonApplication" is an instance of a DS.Model called "elavon-application" and...

sortable list in emberjs


ember.js,ember-data,handlebars.js
i have loaded a list from server into handlebar. when the list order changes, i need to send the sorted order back to the server. to make a list sortable, i have used jquery-ui.js. when i change the list order by dragging and dropping the list, visually the list order...

Ember belongsTo relationship passing as nil to server on saving


javascript,ruby-on-rails,ruby,ember.js,ember-cli
Ember CLI 0.2.5 + Rails 4.2 using ember-cli-rails gem, active_model_serializer (0.9.3) I am currently trying to pass user into createRecord and it won't save or bind the user_id when passing to rails. Parameters come back as: {"course"=>{"subject"=>"CSE", "number"=>110, "credit_hours"=>3, "grading_scale"=>"Regular", "user_id"=>nil}} Ember Controller (Finding the user returns correct value) import...

How to get Ember compoment's “ID” attribute?


jquery-ui,ember.js
I am using a ember components in a recursive manner and im going to make particular components as draggable in jquery-ui. so,i need to get its corresponding view id like "ember143" for the following HTML view, <div id="ember143" class="ember-view"></div> is there a way to get the id attribute? NOTE: i...

Assign two actions to one element in Ember.js


ember.js
<span {{action 'toggleChildren' 'ServerObjects'}} {{action 'contextMenu' on='contextMenu'}}>{{server.name}}</span> Unfortunatelly when I add this second action, the first one stops working. I can't find a way to assign two actions to one element. I found this topic: Ember : handling multiple events with {{action}} tag? . Does it still apply?...

In Ember how can I create a component by name programmatically


ember.js,ember-cli
I can find lots of examples on how to create a component in Ember programmatically and add it to the DOM like this: var comp = App.FooBarComponent.create(); comp.appendTo('#someArea'); But what would you do if you wanted to do it by a name provided? var componentName = 'FooBar'; var comp =...