Develop Reference

Ember.js route problems with filter

My aim is to pass filtered data to my controller and then to my template. I've tried not using the filter and everything works as expected. If I even try to use a filter that lets everything through, I don't get any data. I've even tried using false instead of true and fiddling with the argument list of the filter.
I'm using ember-data fixtures to test this. I'm following the name conventions so much of the work is done for me under the hood. That all seems to be working though (otherwise the first example should also have a problem).
Works (arrives in the controller and eventually gets rendered on the page):
App.DomainDirRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('domain_dir');
}
});
Fails (controller gets an empty array):
App.DomainDirRoute = Ember.Route.extend({
model: function(params) {
return this.store.filter('domain_dir', function(item){
return true;
});
}
});
UPDATE (ATTEMPT 1):
Okay, so I've tried a couple of things based on Sam Selikoff's answer. I've defined 4 properties (2 filters, one map, one plain copy) in the controller and tried to display each in the mockup page. Only the property copyDomain gives a result.
Properties in controller:
filteredDomains: Ember.computed.filterBy('domain', 'domain', true),
upperCaseDomains: Ember.computed.map('domain', function(domain, index) {
return domain.toUpperCase() + '!';
}),
filteredDomains2: function() {
return this.get("model").filterBy('domain', true);
}.property('model.#each.domain'),
copyDomains: function(){
result = [];
this.forEach(function(item) {
result.pushObject(item);
})
console.log(result);
return result;
}.property('model.#each.domain')
Mockup:
<ul>
<li>filteredDomains</li>
{{#each domainDir in controller.filteredDomains}}
<li>domainDir.domain</li>
{{/each}}
</ul>
<ul>
<li>filteredDomains2</li>
{{#each domainDir in controller.filteredDomains2}}
<li>domainDir.domain</li>
{{/each}}
</ul>
<ul>
<li>upperCaseDomains</li>
{{#each domainDir in controller.upperCaseDomains}}
<li>domainDir.domain</li>
{{/each}}
</ul>
<ul>
<li>copyDomains</li>
{{#each domainDir in controller.copyDomains}}
<li>domainDir.domain</li>
{{/each}}
</ul>

Filtering is generally done at the controller/component level. store.find makes an AJAX request. Is your goal to only retrieve the filtered subset of data from the server, or to filter the data you already have at the view layer?
Typically if you're just wanting to do some live filtering, you'll do it in the controller. Leave your model hook as this.store.find('domain_dir') and add a filter in your controller:
App.DomainDirController = Ember.Controller.extend({
filteredDomains: function() {
return this.get("model").filterBy('someProp', true);
}.property('model.#each.someProp')
});
You should also check out the computed macros for some shorthands:
App.DomainDirController = Ember.Controller.extend({
filteredDomains: Ember.computed.filterBy('model', 'someProp');
});
Now in your template, you can do
{{#each domain in filteredDomains}}
...

ember component based on model type

I know this is somewhat duplicated, but All my efforts to create a dynamic component renderer are failing possibly due to my lack of knowledge in ember concepts.
My Scenario is a multi purpose search bar which will search for models in the cache. I would like each search result to be rendered below the search input according to the model's type key. the handlebars file will be named according to the model type with the syntax components/app-search-<model-type-key>.hbs e.g. the template name for a customer model should be components/app-search-customer.hbs
my search template looks like this:
<div class="well well-md">
<div class="input-group">
{{input value=searchTerm class="form-control"}}
</div>
{{#if searchTerm}} <!-- Updating searchTerm causes results to populate with models -->
{{#if results.length}}
<ul class="list-group search-results">
{{#each result in results}}
<!-- todo -->
{{renderSearchComponent model=result}}
{{/each}}
</ul>
{{else}}
Nothing here Captain
{{/if}}
{{/if}}
</div>
And my attempt at a renderSearchComponent helper looks like this:
Ember.Handlebars.registerHelper('renderSearchComponent', function(model, options) {
var modelType = options.model.constructor.typeKey,
componentPath,
component,
helper;
if (typeof modelType === 'undefined') {
componentPath = "app-search-default";
} else {
componentPath = "app-search-" + modelType;
}
component = Ember.Handlebars.get(this, componentPath, options),
helper = Ember.Handlebars.resolveHelper(options.data.view.container, component);
helper.call(this, options);
});
When this runs the options.model throws: TypeError: options.model is undefined and additionally i have the following error:
Error: Assertion Failed: Emptying a view in the inBuffer state is not allowed and should not happen under normal circumstances. Most likely there is a bug in your application. This may be due to excessive property change notifications.
I have been batting my eyelids for what seems hours now trying to get this right. Is what I am asking for even possible?
Thank you in advance.

I know this is a year old question, but Ember since version 1.11+ has the new component helper to dynamically render components.
{{#each model as |post|}}
{{!-- either foo-component or bar-component --}}
{{component post.componentName post=post}}
{{/each}}

You were on the right path, a working example could be like:
import {handlebarsGet} from "ember-handlebars/ext";
Ember.Handlebars.registerHelper('renderSearchComponent', function(value, options) {
var propertyValue;
if (options) {
if ( options.types[0] !== 'STRING' ) {
var context = (options.contexts && options.contexts.length) ? options.contexts[0] : this;
propertyValue = handlebarsGet(context, value, options);
propertyValue = propertyValue.constructor.typeKey;
} else {
propertyValue = value;
}
} else {
options = value;
propertyValue = 'default';
}
var property = 'app-search-'+propertyValue;
var helper = Ember.Handlebars.resolveHelper(options.data.view.container, property);
if (helper) {
return helper.call(this, options);
}
});
This helper allows to pass either string, nothing or binding property.
{{renderSearchComponent}}
{{renderSearchComponent 'book'}}
{{renderSearchComponent result}}
Helper internals are not completed documented, i think because they are not a public API. But you could take inspiration by looking at the helper source code.

Computed.alias not updating bind-attr

I recently started using Ember.js. In my small application I currently have problems regarding Ember.computed.alias, because an {{#if}}-section is updated properly, but the bind-attr helper in the same template is not updated accordingly.
The application controller and the action influencing the value look as follows:
App.ApplicationController = Ember.ObjectController.extend({
isEditing: false,
actions: {
toggleEdit: function() {
var a = this.get('isEditing');
this.set('isEditing', !a);
}
}
});
The controller taking care of the template causing problems:
App.CategoriesController = Ember.ArrayController.extend({
needs: ['application'],
isEditing: Ember.computed.alias('controllers.application.isEditing'),
general: function() { // example depending on the alias
var result = this.filterBy('type', 1);
if (!this.get('isEditing')) {
result = result.filterBy('isHidden', false);
}
return result;
}.property('#each.type', '#each.isHidden', 'isEditing'),
// ......
The related template:
<ul id="categories">
{{#if isEditing}}YES!{{else}}NO!{{/if}}
{{#each general}}
<li {{bind-attr class=":general isEditing:editing"}}>
{{name}}
</li>
{{/each}}
</ul>
When the action toggleEdit is triggered, the {{#if}} section is updated and swaps between YES! and NO!, but the editing class is not applied to the list element. I tried encapsulated the alias into another property of the controller depending on the alias, but without success.
I assume it's a beginners mistake, but I can't figure out what I am overlooking.
Thanking you in anticipation.

isEditing is no longer in scope, use controller.isEditing, sorry phone response
Here's an example that would keep it in scope, but I'm fully qualifying it just to show you.
{{#each item in general}}
<li {{bind-attr class=":general controller.isEditing:editing"}}>
{{item.name}}
</li>
{{/each}}

this in event handling functions of Meteor: How does this get bound to model object?

The following code is taken from a tutorial in tutsplus.
if (Meteor.isClient) {
var Products = new Array(
{ Name: "Screw Driver",
Price: "1.50",
InStock: true},
{ Name: "Hammer",
Price: "2.50",
InStock: false}
);
Template.Products.ProductArr = function () {
return Products;
};
Template.Products.events = {
"click .Product": function () {
if (this.InStock)
confirm("Would you like to buy a " + this.Name + " for " + this.Price + "$");
else
alert("That item is not in stock");
}
};
}
Here is the template:
<template name="Products">
{{#each ProductArr}}
<div class="Product">
<h2>{{Name}}</h2>
<p>Price: ${{Price}}</p>
{{#if this.InStock}}
<p>This is in stock</p>
{{else}}
<p>This is sold out</p>
{{/if}}
</div>
{{/each}}
</template>
I wonder how this get bound to the model object product? This looks like magic to me.
The expression "click .Product" specifies that the click event on HTML elements having class Product should trigger the specified function. I understand it. But I don't understand why this is bound to an element of the Products array.

This is how Handlebars (which Meteor builds on) works. What you're seeing in the template isn't pure JS, but syntax specific to Handlebars.
Inside the each block helper, the context is to set each element of the array you're iterating over. So if you use InStock, it will look for it on the element of the current iteration.
The this keyword is used for disambiguation. This comes in handy if you have a general helper registered with the name InStock, like this, for example:
Template.Products.InStock = function (){
//...
};
But you want to make sure you're referring to the property of the element from the array, so you can use this to access its context explicitly.

Backbone Changing Class Name during {{each items}}

I want to change the classname during an each loop;
so that it will look like this;
<div class="active">
// do somthing
</div>
<div class="static">
//do
</div>
my code looks like this
{{#each pages}}
<div class="active">
//do
</div>
{{/each}}
there is no identifier of the class. So the 1st one will be active, the rest of the items will be static.

You could add your own helper if you want to do this inside the template. Something like this:
Handlebars.registerHelper('each_with_class', function(ary, first, rest, options) {
if(!ary || ary.length == 0)
return options.inverse(this);
var result = [ ];
var context = null;
var cls = { cls: first };
for(var i = 0; i < ary.length; ++i) {
context = _({}).extend(ary[i], cls);
result.push(options.fn(context));
cls.cls = rest;
}
return result.join('');
});
Then your template could say things like this:
{{#each_with_class pages "active" "static"}}
<div class="{{cls}}">
Same stuff you're doing now.
</div>
{{/each_with_class}}
If you don't mind ary[i] getting modified along the way then you can assign directly to ary[i].cls instead of using _.extend to make a copy.
Demo: http://jsfiddle.net/ambiguous/ZMSQh/1/

as far as I know there are no indices provided by {{#each}} that could be checked..
a workaround would be to store this classes in your pages items and then use something like
{{#each pages}}
<div class="{{this.classname}}">
//do
</div>
{{/each}}