I am trying to set the value of a computed property from one controller to another.
var BusinessOwner = Ember.ObjectController.extend({
actions: {
save: function(){
var self = this;
return Ember.$.ajax({
}).then(function(){
var ownerShow = self.store.getById('application',100);
ownerShow.get('ownerGeneral');
ownerShow.set('ownerGeneral', 'complete')
Ember.set(self, 'controllers.collectinfo.ownerGeneral','completed');
//self.set('controllers.collectinfo.ownerGeneral', "completed");
});
}
}
I have tried several different attempts at setting this property but have proved unsuccessful. If I use the self set, errors that I must use Ember.set(). If I use Ember.set() I get error collectinfo must be global if no obj given.
Thanks for any help
EDIT:
Thanks for looking at this. Yes I am includeing needs: 'collectinfo' I am still getting the error that Ember.set() needs to be used to set the object
You need to provide needs array in the controller as well.
var BusinessOwner = Ember.ObjectController.extend({
needs: 'collectinfo'
actions: {
save: function(){
var self = this;
return Ember.$.ajax({
}).then(function(){
var ownerShow = self.store.getById('application',100);
ownerShow.get('ownerGeneral');
ownerShow.set('ownerGeneral', 'complete')
Ember.set(self, 'controllers.collectinfo.ownerGeneral','completed');
//self.set('controllers.collectinfo.ownerGeneral', "completed");
});
}
}
Coding wise i suggest you create a own computed property for the one you want to access from other controller. So code becomes like this.
var BusinessOwner = Ember.ObjectController.extend({
needs: 'collectinfo',
ownerGeneral: Ember.computed.alias('controllers.collectinfo.ownerGeneral')
actions: {
save: function(){
var self = this;
return Ember.$.ajax({
}).then(function(){
var ownerShow = self.store.getById('application',100);
ownerShow.get('ownerGeneral');
ownerShow.set('ownerGeneral', 'complete')
Ember.set(self, 'ownerGeneral','completed');
//self.set('controllers.collectinfo.ownerGeneral', "completed");
});
}
}
You can set dependencies between controller with the controller needs property, it's documented at Ember Guide.
App.IndexController = Em.Controller.extend({
needs: 'application',
message: 'hi!',
actions: {
changeApplicationMessage: function() {
this.set('controllers.application.message', 'good bye');
},
changeMessage: function(){
this.set('message', 'bye');
}
}
});
The dependent controller property will be accesible in the controller at {{controllers.controllerName.propertyName}}
Demo: http://emberjs.jsbin.com/vevet/1/edit
In addition to what others said about "needs," just declare a shortcut variable for set and get:
var get = Ember.get;
var set = Ember.set;
and then use them like so:
set(object, 'property', 'value-to-set-property-to');
I assume that your controller declares a needs property with "collectInfo" as value? Then it should work this way:
var BusinessOwner = Ember.ObjectController.extend({
needs : ['collectInfo'],
actions: {
save: function(){
var collectinfoController = this.get('controllers.collectinfo');
return Ember.$.ajax({
}).then(function(){
var ownerShow = self.store.getById('application',100);
ownerShow.get('ownerGeneral');
ownerShow.set('ownerGeneral', 'complete')
collectinfoController.set('ownerGeneral','completed');
});
}
}
Related
I want to access application controller so I can get/set a variable (selected_date) value.
myApp.ApplicationController = Ember.Controller.extend({
selected_date: null,
actions: {
}
}
});
I would like to make edits to selected_date from a view (didinsertelement), the controller for the view is:
myApp.CreportController = Ember.ObjectController.extend({
needs: ["application"]
});
view:
CreportController View = Ember.View.extend({
didInsertElement: function() {
var controller = this.get('controller');
var selected_date = controller.get('controllers.application').get('selected_date');
...
You have your properties wrong. Using the needs functionality puts those controllers in a controllers property. Your view can then access its own controller using the controller property. So you need to do this in your view:
didInsertElement: function() {
var selected_date = this.get('controller.controllers.application').get('selected_date');
}
I updated the code with the solution:
var controller = this.get('controller');
var selected_date = controller.get('controllers.application').get('selected_date');
I have a custom component that expects data and not a promise, but I am unsure if they way that I am obtaining the data is the right way.
Is this the right way to do it?
component hbs
{{x-dropdown content=salutations valuePath="id" labelPath="description" action="selectSalutation"}}
Doesn't work
controller (this is the way I expect things to work
import Ember from 'ember';
export default Ember.Controller.extend({
bindSalutations: function() {
var self = this;
this.store.find('salutation').then(function(data) {
self.set('salutations', data);
});
}.on('init'),
components/x-dropdown.js
import Ember from 'ember';
export default Ember.Component.extend({
list: function() {
var content = this.get('content');
var valuePath = this.get('valuePath');
var labelPath = this.get('labelPath');
return content.map(function(item) {
return {
key: item[labelPath],
value: item[valuePath],
};
});
}.property('content'),
This works
controller
bindSalutations: function() {
var self = this;
this.store.find('salutation').then(function(data) {
self.set('salutations', data.get('content')); // pass the content instead of just the data
});
}.on('init'),
component
...
list: function() {
var content = this.get('content');
var valuePath = this.get('valuePath');
var labelPath = this.get('labelPath');
return content.map(function(item) {
return {
key: item._data[labelPath], // access through the _data attribute
value: item._data[valuePath],
};
});
}.property('content'),
Ember Data returns a Proxy Promise. This means you can use the promise as if it were a collection or model itself, as long as you aren't dependent on the property being completely populated when you use it. If you really want the promise resolved, you should probably be setting it up in the route.
If you want it on your controller, you can be lazy and do it like so:
Controller
salutations: function() {
this.store.find('salutation');
}.property(),
Component
...
list: function() {
var content = this.get('content'),
valuePath = this.get('valuePath'),
labelPath = this.get('labelPath');
return content.map(function(item) {
return {
key: item.get(labelPath),
value: item.get(valuePath),
};
});
}.property('content.[]'),
Template
{{x-dropdown content=salutations valuePath="id" labelPath="description" action="selectSalutation"}}
The real trick is to watch if the collection is changing. Hence you'll see I changed the property argument to content.[]
I have an ArrayContoller on which I want to set a boolean property based on the properties of its contents.
Plain-language description of the logic:
If the array contains any items with a property of isRetired equal to true, set the retiredShoes property of the ArrayController to true, otherwise, set the ArrayController retiredShoes property to false.
It seems like this should be a simple matter, but I haven't found a solution anywhere, and I'm still pretty new at this.
I'll put together a jsfiddle if necessary.
Here are the controllers for the array and the object:
App.ApplicationController = Ember.ArrayController.extend({
sortProperties: ['title'],
itemController: 'shoe',
retiredShoes: function() {
//how do I compute this sucker?
}
});
App.ShoeController = Ember.ObjectController.extend({
needs: ['application'],
actions: {
delete: function() {
var shoe = this.get('model'),
runs = shoe.get('runs');
shoe.deleteRecord();
shoe.save();
},
toggleRetired: function() {
var shoe = this.get('model');
shoe.toggleProperty('isRetired');
shoe.save();
}
}
});
Off top of my head, without jsbin. If there's a problem/bug, drop me a comment and I'll look it over again.
App.ApplicationController = Ember.ArrayController.extend({
retiredShoes: function() {
return this.get("model").isAny("isRetired", true);
}.property("model.#each.isRetired")
});
I feel like this should be pretty straight-forward, but I'm unable to get the contents of a controller in a different view. Here is my code:
App.MapView = Ember.View.extend({
elementId: ['map-canvas'],
didInsertElement: function() {
var self = this;
var controller = this.get('controllers.markers');
}
});
If I console.log(controller) I get undefined.
In a controller I would do something like:
App.MarkersController = Ember.ArrayController.extend({
needs: ['map']
});
App.MapController = Ember.ObjectController.extend({
plot: function() {
var markers = this.get('controllers.markers');
}
});
You place the needs on the controller that needs another controller, and where you'll be accessing the other controller.
And from a view, in order to grab the controller you do this.get('controller') and the controllers object lives on the controller, so controller.controllers.markers
Additionally, the view is only created with the controller by default if ember creates it, if you are doing something like {{view App.MapView}} it isn't creating the MapController and associating it with it, it's using the controller that was in scope when you created the view.
App.MapView = Ember.View.extend({
elementId: ['map-canvas'],
didInsertElement: function() {
var self = this;
var controller = this.get('controller.controllers.markers');
}
});
App.MarkersController = Ember.ArrayController.extend({
});
App.MapController = Ember.ObjectController.extend({
needs: ['markers'],
plot: function() {
var markers = this.get('controllers.markers');
}
});
Check out this implementation of it:
http://emberjs.jsbin.com/ODuZibod/1/edit
I have the following controller:
var ProductsController = Ember.ArrayController.extend({
search: function(queryString) {
this.set('model', App.Product.find({query: queryString }));
}
});
and a text field:
var SearchFieldView = Ember.TextField.extend({
insertNewline: function() {
this.get('controller').search(this.get('value'));
}
});
Now I want to disable the text field when the controller loads a new model in the search function. Using something like disabledBinding: 'controller.content.isLoaded' in the view doesn't work.
var ProductsController = Ember.ArrayController.extend({
search: function(queryString) {
this.set('isLoadingData', true);
var products = App.Product.find({query: queryString });
this.set('model', products);
products.then(function() {
this.set('isLoadingData', false);
});
}
});
var SearchFieldView = Ember.TextField.extend({
attributeBindings: ['disabled'],
disabledBinding: 'controller.isLoadingData',
insertNewline: function() {
this.get('controller').search(this.get('value'));
}
});
Explanation:
Before doing a request set isLoadingData to true. ember-data find() uses the Promise API: Set the isLoadingData to false when the request has been completed successfully. You might want to handle the failed case. See RSVP.js for reference. Finally bind the disabled property of Ember.TextField to controller.isLoadingData.
A simpler way, as you have already tried:
var ProductsController = Ember.ArrayController.extend({
search: function(queryString) {
this.set('model', App.Product.find({query: queryString }));
}
});
var SearchFieldView = Ember.TextField.extend({
attributeBindings: ['disabled'],
disabled: function() {
return this.get('controller.model.isLoaded') === false;
}.property('controller.model.isLoaded'),
insertNewline: function() {
this.get('controller').search(this.get('value'));
}
});
If you want all the Ember.TextField to have the disabled property binding:
Ember.TextField.reopen({
attributeBindings: ['disabled']
});