Specifying a dynamic string in .property() - ember.js

I'm trying to so this, but it doesnt work
App.FacetCheckboxView = Ember.Checkbox.extend({
facetName: null,
facetValue: null,
checked: function () {
var s = this.get('facetValue');
var selected = this.get('controller.' + this.get('facetName'));
return selected.contains(s);
}.property('controller.'+ this.get('facetName') +'.#each')
})
If I use a static string instead in the property method argument it does work. Is there an alternative to accomplish the same?

Sure, you can define a computed property on init
App.FacetCheckboxView = Ember.Checkbox.extend({
init: function(){
this._super();
Ember.defineProperty(this, 'checked', Ember.computed(function() {
var facetValue = this.get('facetValue'),
options = this.get('controller.' + this.get('facetName'));
return options.contains(s);
}).property("controller." + this.get('facetName') + ".[]", 'facetValue'));
},
facetName: null,
facetValue: null
});
I made an example, I'm not completely sure if this is how you're using the view, but it should get you on the right road.
http://emberjs.jsbin.com/vopewayo/1/edit
Personally it seems like it'd be easier to just not define the value as a string, but as the collection, but I'm not sure of your exact use case.

Related

Ember.computed.sort property not updating

I've been cracking my head for the last several days, trying to understand what am I doing wrong.
I'm implementing an infrastructure of lists for my app, which can include paging/infinite scroll/filtering/grouping/etc. The implementation is based on extending controllers (not array controllers, I want to be Ember 2.0 safe), with a content array property that holds the data.
I'm using Ember.computed.sort for the sorting, and it's working, but i have a strange behavior when i try to change the sorter. the sortedContent is not updating within the displayContent, even though the sortingDefinitions definitions are updated.
This causes a weird behaviour that it will only sort if I sort it twice, as if the sorting was asynchronous.
I am using Ember 1.5 (but it also happens on 1.8)
(attaching a snippet of code explaining my problem)
sortingDefinitions: function(){
var sortBy = this.get('sortBy');
var sortOrder = this.get('sortOrder') || 'asc';
if (_.isArray(sortBy)) {
return sortBy;
}
else {
return (sortBy ? [sortBy + ':' + sortOrder] : []);
}
}.property('sortBy', 'sortOrder'),
sortedContent: Ember.computed.sort('content', 'sortingDefinitions'),
displayContent: function() {
var that = this;
var sortBy = this.get('sortBy');
var sortOrder = this.get('sortOrder');
var list = (sortBy ? this.get('sortedContent') : this.get('content'));
var itemsPerPage = this.get('itemsPerPage');
var currentPage = this.get('currentPage');
var listItemModel = this.get('listItemModel');
return list.filter(function(item, index, enumerable){
return ((index >= (currentPage * itemsPerPage)) && (index < ((currentPage + 1) * itemsPerPage)));
}).map(function(item) {
var listItemModel = that.get('listItemModel');
if (listItemModel) {
return listItemModel.create(item);
}
else {
return item;
}
});
}.property('content.length', 'sortBy', 'sortOrder', 'currentPage', 'itemsPerPage')
Edit:
fixed by adding another dependency to the displayContent (sortedContent.[]):
displayContent: function() {
....
}.property('content.length', 'sortBy', 'sortOrder', 'currentPage', 'itemsPerPage' , 'sortedContent.[]')
Your sort function is watching the whole array sortingDefinitions instead of each element in the array. If the array changed to a string or some other variable it would update but not if an element in the array changes.
To ensure your computed property updates correctly, add a .[] to the end of the array so it looks like this: Ember.computed.sort('content', 'sortingDefinitions.[]')

Sitecore 8 SPEAK - Calling Custom components Javascript method

My question is somewhat similar to followin unanswered question. (Not sure though)
Sitecore 8 SPEAK: Getting an Error When calling a Method in JS File
I am using Sitecore8
On my page there is a button and on its click event I want to call add() of custom datasource component.
Layout:
JS Code for the Page:
define(["sitecore"], function (Sitecore) {
var JsonListPage = Sitecore.Definitions.App.extend({
initialized: function () {
alert('Inside Json PageList Init');
},
loadData: function () {
alert('Button clicked');
app.add();
}
});
return JsonListPage;
});
JS Code for the custom datasource component:
define(["sitecore"], function (Sitecore) {
var model = Sitecore.Definitions.Models.ControlModel.extend({
initialize: function (options) {
this._super();
this.set("json", null);
alert('Inside Jsondatasource Init');
},
add: function (data) {
var json = this.get("json");
if (json === null)
json = new Array();
// this is done because array.push changes the array to an object which then do no work on the SPEAK listcontrol.
var newArray = new Array(json.length + 1);
for (var i = json.length - 1; i >= 0; i--)
newArray[i + 1] = json[i];
newArray[0] = data;
this.set("json", newArray);
}
});
var view = Sitecore.Definitions.Views.ControlView.extend({
initialize: function (options) {
this._super();
this.model.set("json", null);
}
});
Sitecore.Factories.createComponent("JsonDatasource", model, view, ".x-sitecore-jsondatasource");
});
.cshtml for Custom component:
#using Sitecore.Mvc
#using Sitecore.Mvc.Presentation
#using Sitecore.Web.UI.Controls.Common.UserControls
#model RenderingModel
#{
var userControl = Html.Sitecore().Controls().GetUserControl(Model.Rendering);
userControl.Requires.Script("client", "JsonDatasource.js");
userControl.Class = "x-sitecore-jsondatasource";
userControl.Attributes["type"] = "text/x-sitecore-jsondatasource";
userControl.DataBind = "Json: json";
var htmlAttributes = userControl.HtmlAttributes;
}
<div #htmlAttributes>
am here again
</div>
When the page loads:
It shows alert from Custom components Init
Then shows alert from host page's Init
On button click it shows the alert and after that gives error on "app".
There is some bit which I am missing.. any help would be appreciated.. Please let me know if you need anymore inputs.
Thanks in advance!
app is only available in debug mode so id avoid using that, use "this" instead.
From your code example it appears that you are calling app.Add(), There is no Add function on your pageCode, this is what your code is doing. Instead you need to access your components's Add Method.
Instead to access events within your component you want to call the function like this:
this.ComponentID.Add();
I have an example of a custom SPEAK component here you can refer to for how to create the component. https://github.com/sobek1985/MikeRobbinsSPEAKRichTextEditor
From the code is seems your creating a JSON datasource, there is an example by Anders here http://laubplusco.net/creating-simple-sitecore-speak-json-datasource/

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

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  |
|             +--------->            |
|             |         |            |
+-------------+         +------------+
                              |       
                              | hasMany
                        +-----v------+
                        | Alpha      |
                        |            |
                        |            |
                        +------------+
So I created something like this:
allAlphas: function() {
var self = this;
var returnValue = "nichts";
var promises = {
allAlphas: self.get('model.method').then(function(method) {
//get the practices
return method.get('practices');
}).then(function(practices) {
//get the alphaSField in EVERY practice
//the alphasField is the (hasmany 'alpha')member in practice
var alphasFields = practices.getEach('alphas');
return Ember.RSVP.all(alphasFields).then(function() {
return alphasFields;
});
}).then(function(alphasFields) {
// here: get all the alphas via promise or something
})
};
Ember.RSVP.hash(promises).then(function(results) {
// return all the alphas (of all pracitces in the method) in some way
});
}.property()
There are two Problems (like already metioned in the comments):
How to load nested hasMany async models like all alphas in all practices.
How to return the complete result as a property in the RSVP.hash-Method for use in templates or something
Can anybody help me?
Edit 06/20/2015
As #Kingpin2k suggested, Ive added a Gist for better understanding of my Problem:
https://gist.github.com/MarcManhart/e5c1d91e8fdfd876de37
just return an array, and populate the array after the fact.
allAlphas: function() {
var self = this,
returnValue = [];
this.get('model.method').then(function(method) {
//get the practices
return method.get('practices');
}).then(function(practices) {
//get the alphasField in EVERY practice
//the alphasField is the (hasmany 'alpha')member in practice
var alphas= practices.getEach('alphas');
Ember.RSVP.all(alphas).then(function(resolvedAlphas) {
resolvedAlphas.forEach(function(afs){
returnValue.pushObjects(afs.toArray());
});
});
});
return returnValue;
}.property()
Update
It looks like pushObjects doesn't like the ED Collection (or maybe it doesn't like the promises underneath, I didn't look into it that much). Also we should use the resolved values instead of the promises sent in (alphas vs resolvedAlphas in my code below).
Example: http://emberjs.jsbin.com/cinobetoyu/1/edit?js,output

Get all passed-in attrs from an Ember Component

Is it possible to get all attrs defined in an Ember component? E.g. if someone uses it like this
{{my-datepicker one='option' another='option' ... }}
in the component code can I grab or iterate over all the options that were passed in?
I believe this is going to be much simpler with block params + other forthcoming improvements, but is there a hacky way to do this right now?
If there is a will - there is gotta to be a way. You asked for hacky :)
App.XHackComponent = Ember.Component.extend({
didInsertElement: function(){
var source = this._keywords.view.source;
var exceptions = ["helperName", "templateData", "container", "elementId",
"currentState", "classNames", "classNameBindings", "controller",
"toString", "buffer", "element"];
for (var key in source) {
if(key.charAt(0) === "_") continue;
if (source.hasOwnProperty(key) && !exceptions.contains(key)) {
console.log("Key: " + key + ", Value: " + source[key]);
}
}
}
});
Working example here

Automatic type casting of vanilla objects to Ember objects

I'm just diving in to Ember. I'm looking for a way to pass a plain array of vanilla objects into a collection/controller and have them type cast to the correct model.
Here's the simple collection view:
{{#collection id="prods" contentBinding="Vix.prodsController" tagName="ul"}}
{{content.title}}
{{/collection}}
Here's the model:
Vix.Prod = Ember.Object.extend({
id: null,
title: null
});
And the controller:
Vix.prodsController = Ember.ArrayController.create({
content: []
});
Then let's get some JSON-formatted data from the server. In this example I'll just hard-code it:
var prods = [{id:"yermom1", title:"yermom 1"}, {id:"yermom2", title:"yermom 2"}]
Vix.prodsController.set('content', prods);
So far so good. I get my simple list of li elements displaying the titles as I'd expect. But when I want to update the title of one of the objects, using:
Vix.prodsController.objectAt(0).set('title', 'new title')
It complains because the object has no set method-- it has not been properly cast to my Vix.Prod Ember Object.
Using this alternative:
Vix.prodsController.pushObjects(prods);
Produces the same result. It's only if I explicitly create new model instances that I get the get/set goodness:
var prods = [Vix.Prod.create({id:"yermom1", title:"yermom 1"}), {Vix.Prod.create(id:"yermom2", title:"yermom 2"})]
Is there a way to automatically type cast those vanilla objects to my Vix.Prod Ember Object? If not, am I the only one that really wants something like that? In Backbone one can set the model property on a collection. I suppose I can create a setter on my Controller to do something similar- just wondering if there is something built-in that I'm missing. Thanks!
No magic. I'd suggest do a loop wrapping the model.
var prods = [{id:"yermom1", title:"yermom 1"}, {id:"yermom2", title:"yermom 2"}];
for (var i = 0; i < prods.length; i++) {
prods[i] = Vix.Prod.create(prods[i]);
}
If I use ember as much as I hope to, I'm going to want a shortcut. So here's what I've done for now. I created a base Collection class that I use to create my Collections/Controllers:
Vix.Collection = Ember.ArrayController.extend({
model: null,
pushObject: function(obj) {
if (this.get('model') && obj.__proto__.constructor !== this.get('model')) {
obj = this.get('model').create(obj);
}
return this._super(obj);
},
pushObjects: function(objs) {
if (this.get('model')) {
objs = this._typecastArray(objs)
}
return this._super(objs);
},
set: function(prop, val) {
if (prop === 'content' && this.get('model')) {
val = this._typecastArray(val);
}
return this._super(prop, val);
},
_typecastArray: function(objs) {
var typecasted = [];
objs.forEach(function(obj){
if (obj.__proto__.constructor !== this.get('model')) {
obj = this.get('model').create(obj);
}
typecasted.push(obj);
}, this);
return typecasted;
}
})
Now when I call pushObject, pushObjects, or .set('collection', data), if the collection instance has a defined model property and the objects being added to the collection aren't already of that type, they'll be cast. Been working good so far, but I welcome any feedback.
You should have a look at ember-data: https://github.com/emberjs/data
It seems to fit your needs...
As of today, it's not yet production ready (as stated in the readme), but is quickly converging toward maturity, thanks to an active development.