I am trying to bind an Ember object to a property in an ArrayController. The properties of this object will be used for all objects added to the ArrayController in calculations.
Here's a simple example of what I'm seeing: http://jsfiddle.net/EjDFS/2/
As you can see, the object that I am trying to bind is undefined within the array controller. I do not want to bind this object directly to the objects that are added to the array controller.
Thanks for taking the time to look at this - much appreciated!
Its undefined because when it fires, it hasn't completed its run loop.
and as for App.ObjectOne.param3, you need to use this.get('param1') instead of param1, the same with param2
http://jsfiddle.net/EjDFS/4/
Related
So I understand that Ember can compute on an array and elements within it. There are two options here.
someArray.[] and someArray.#each
If say I changed one of the element in array and there is a computed property that depends on it. Which one should I use? Thanks.
someArray.[] will only be used when the array items are added/removed.
When the particular property in the array object is changed then someArray.#each will be called.
isNameChanged: function() {
console.log('is Name Changed')
}.property('someArray.#each.name')
Can check this Ember.js: Observing array property using #each doesn't work
So I have this computed property inside my component.js: contexts: Ember.computed.oneWay('myService.contexts'),
And I am able to get the content from another action
openHelp(){
console.log(this.get('contexts'))
alert(this.get('contexts'))
}
}
But when I try to use the computed property in Handlebars ({{contexts}}) it's just blank.
I created an Ember Twiddle for this question: https://ember-twiddle.com/38de64d58dcf3298df6d4176f15cbc0e?openFiles=components.my-component-help.js%2Ctemplates.components.my-component-help.hbs
If I have an array foo: [ 'foo','bar'] and I do {{foo}} it outputs in handlebars. But if I make foo a computed property that gets [ 'foo','bar'] from and do {{foo}} I get nothing.
Here's the solution: https://ember-twiddle.com/e9c2ef05e27013a389e0b2bfdaec3d40?openFiles=services.my-service.js%2Ctemplates.components.my-component-help.hbs
There were two issues:
contexts is an array. When you console.log or alert it, those methods internally in some browsers JSON.stringify the object for you for your convenience. Ember will not do that. You need to format the array yourself or, as I did, each over it. For debugging purposes, feel free to use the log helper.
Computed properties on arrays are watching for array mutations through Ember's methods such as pushObject and removeObject. Simply using push or splice won't update the computed property.
Can't comment on the above answer which is correct because I don't have enough reputation, but I wanted to add a link to the documentation relating to Ember's observable methods for enumerables:
https://guides.emberjs.com/v2.5.0/object-model/enumerables/
I am trying to access an array of objects within $scope.
If I console.log($scope) (see image below) it displays the pedigree object that I would like to access. However, if I console.log($scope.pedigree) I get undefined. If I console.log(typeof $scope.pedigree) I get object.
Can someone help me access pedigree?
Pedigree is an array of objects, not a single object. As a result, you need to access the appropriate instance by index to get your object.
var pedigree = $scope.pedigree[0];
There is no "array" type in Javascript. As a result, when you use typeof on your $scope.pedigree property, it will tell you it is of type object, even though happens to be an array of objects.
You can access to scope via jquery or jqlite: $('.element').scope();
Accessing via console.log is not possible, because angular doesn't use global scope for storing scopes. More information here.
I'm trying to instantiate and render a view but SOMETIMES I need to pass an extra object to that view called keys.
this.$container.append(new app.MyExtraView({'model':model,'keys':keys}).render().el));
I'm expecting this.keys to be available from within app.MyExtraView but it isn't. How can I pass keys = {} to app.MyExtraView and access it inside app.MyExtraView like this.keys?
Interestingly the model object behaves in this manner 'automatically'.
Note that this keys object won't be needed every time.
thank you already
I'm trying to do something like this:
http://jsfiddle.net/bATu3/5/
Where the entire view is generated within an object, privately and return via a public method so that it can be generated on the page. I'm doing something wrong and would appreciate any pointers to help me sort this out.
Try this:http://jsfiddle.net/bATu3/10/
Basically there were few errors: Be careful of the use of 'this' within callback functions.
Also, note the data bind variables <p><strong data-bind="text:firstName"></strong></p>
another way to do this is: http://jsfiddle.net/bATu3/14/
you can specify the scope for computed values by passing it as a secondary parameter as noted here: Knockout: Computed Observables (read the "Managing ‘this’" section)