Lets say I have a custom component called X.
<X>my value</X>
I now want to access the "my value" in the controller of X. How can I do that?
A component does not have access to that content.
The <X> component is used in block form in your example. A component, which supports the block form, yields the execution context back to the caller. It does so at a place marked with {{yield}} keyword in its template. At that point the execution is yielded back to the caller. The component does not have any access to the code, which is run in that slot.
This is similar to the concept of a callback:
You can detect if the caller is using block form by using {{has-block}} helper. This is similar as you can detect in a function if a callback is provided.
You can pass context to the yielded block using positional params on the `{{yield}} keyword. This is similar to executing a callback passed in with arguments.
You can render DOM before and after the yield slot by having silbings in the template. This is similar to executing code before and after the callback is executed.
You can wrap the yield block in DOM. This is similar to passing the callback to another function, which is executed.
But you can not inspect or mutate what is set by the caller as content for the block.
The feature helps to separate concerns and establish clear boundaries between components. If you face it as a limitation it's very likely that the boundaries between the different components in your application is not clear enough.
Related
I have a question please..
how can I make a record become read-only once a particular field has a particular value. for eg. status field has the value "validate"
Think you :)
Vtiger does not offer that functionality through configuration means. However you can create a "before save" event handler. That is code that gets executed every time a record gets saved (but just before the saving is final).
In a nutshell, you have to first create the handler (a php class that extends the VTEventHandler class), then inside that class create the function handleEvent($eventName, $entityData). Inside the function you would write your logic. Finally, you have to register your handler by calling vtlib's Vtiger_Event::register.
In your event handler you can check what the value of the field was before being edited and after it was edited (but before being saved). So, if the field value prior to editing was "validate", in your code you just have to make sure that value stays that way.
You can find more on event handlers here: https://wiki.vtiger.com/index.php/Eventing
I have a component working pretty well and now I need to call it inside a controller.
Scenario: I have an ember application, and I have an update button controller, I did a component that just display a toast(Materializecss) with some message I pass as parameter to the component and both the button and the toast are working well separately. I need to call inside the button controller this component to display to the user if the update was successfully or not using this component I did. Any sugestion of how can I call this component inside the controller? Thanks
have a look at the ember-twiddle I created and see if it fits the bill, in regards to what you want to do ?
You should instead of thinking "calling the component", rather, how can I push updated attributes/data to the component.
Ember relies on the "Data Dow Actions Up" pattern. This implies that you cannot make an explicit call to a component action from a controller. (see https://dockyard.com/blog/2015/10/14/best-practices-data-down-actions-up for example)
Instead, a better design should be to define a service to manage data : messages to be "toasted". Then make this service available by injecting in in your controller. You will be able to call methods to register a new messages and generate new data.
Provide also a component template (to be included in your own templates) that will be in charge to display the new message, etc. Each change in the data managed by the service will lead to a component template update.
You should definitely take a look to https://www.npmjs.com/package/ember-toastr
How can we normally prevent Nothing handled the action error in generic view implementation.
Currently I am reopening controller class and adding empty handler but again if I put it directly Ember throws deprecation message Action handlers implemented directly on controllers are deprecated if I add it in action object it is "not working" (probably overridden) and throws error as if it is not in base controller. Any ideas? Thanks.
If you want a somewhat hacky way to do it, you can add the method to the _actions object on the controller. That's where Ember internally keeps all of the actions for an object. Unfortunately, there's no other way to really handle an unused action from a view. This issue suggested a feature that would allow you to, but it hasn't been implemented yet.
Personally, I don't use straight views at all, I only use components. Components allow you to subscribe to particular events (let them bubble up) and ignore the others completely.
I am extending Ember.TextField (which extends Ember.Component) in order to read a file. My intent is if the chosen file satisfies some conditions, send an action to the controller. But if it fails, send a different action. However when I try to do this, no action is called.
I created a jsbin of what I am trying to do.
You need to send in what the action should map to in that scope when you create the component, in your case they are the same action name, but in other cases, the component could be calling acceptChanges and it could be hitting the controller action acceptImageChanges where-as another may be acceptDocumentChanges. This allows you to use the component multiple times in the same scope, yet have the actions that are passed out of it be customized per instance.
{{view App.ImportFileView invalidFileType='invalidFileType' acceptChanges='acceptChanges' }}
http://emberjs.jsbin.com/tonorida/10/edit
I just start to learn ember.js
Why this code http://jsfiddle.net/alexchetv/RVNzP/ don't work properly -- App.MyTextField.change() execution is triggered only after MyTextField loses focus?
Alternative code with the same functionality works as expected.
Keep in mind that handlers on your Ember.Views (change, select, click, etc) are bound to normal HTML DOM events. "onchange" only gets called on an input field when the field loses focus and has changed, not any time the value is modified. You should observe 'value' if you want to be notified of changes to the displayed value.
Here's a working solution.
What I've done is made formDirty a computed value, which recomputes upon changes in the input. Ember, unlike the native "change" event, updates the the Input's value on each keystroke (copy/paste event etc).
Ember's binding makes sure the peopleController is always updated with the input value, thus also updating the computed field formDirty.
Note that if you add more inputs, you must tell the computed property to listen to its events, e.g.
formDirty: function() {
return !Ember.empty(this.get('fName')) && !Ember.empty(this.get('lName'));;
}.property('lName', 'fName').cacheable() // <- dependencies
cacheable() is used for performance sake only, meaning don't computed again until the dependencies change.