I have an custom component that serves as an input (in my application it does more things, but I've wanted to keep same structure so I've wrapped native input into component).
Then when user changes value of an input, I am calling closure action to format value provided by user (in example I am uppercasing it) and set it to some property (which should be visible for user in input).
Problem happens when I paste some lowercased string (for example abc), and then without deleting nor adding anything I just select everything and paste from clipboard (again abc). At second paste the formatting closure action is called, even setter of an property is called (I've tried computed property with custom set), but my component's input stays unformatted.
I've provided minimal Ember Twiddle to play with: https://ember-twiddle.com/5448bb455fd8732cc87f6ed8f2d44c12
The value is updated in action handler of application controller. At that handler, toUpperCase is called and result is set to a.
In the second call, since the a is not changed, value of my-input will not changed. So the component will not re-render. And pasted value will stay remained.
You can watch this situation by adding {{log (concat 'test' a)}} line to the application.hbs. It will printed only one time.
To make it work: Put the making uppercase logic to the my-input component. It will simply work. Have a look at this twiddle, you can implement similar component.
Related
Working CodeSandbox Demo
So I'm learning to use React, and trying to create a currency exchange app.
I'm having a problem understanding how to setState from multiple inputs depending on the input you're actually using.
I set up a CodePen to show you what I'm trying to do.
Things I know or don't:
Right now I'm only updating a tempValue state.
If I use the first input field it gives me the desired effect.
2.1 I know in this case I'm not updating the states, I'm just doing my math right on the value prop (but it works to show my intention).
2.2 I don't know if I should do the math on setState or on a separate method.
2.3 I can probably use a wait timer and look for onKeyDown then setState.
I could probably use uncontrolled components, but it wouldn't be the React way (is it a bad thing).
My setState originally used [computed properties] for the name but changed it for demonstration purposes.
Working CodeSandbox Demo
Since you have access to the input in your onChange function, you can get the input name off event.target and use that to make modifications in your state.
Alternatively you can bind the function:
<CurrencyInput
onChange={this.handleCurrencyInput.bind(this, currency.name)}
/>
But this isn't the best to do in your render, so you could make a renderCurrencyInput method on your class and bind once there
Computed properties would work, I don't see much of an issue with it. Then you can drive your initial this.state from your list of currencies
I found this question that is similar, but it did not explain the issue I am trying to solve for. (Using Vue.js 2)
I have an array of objects (users), that I display as a list.
I want to open an "edit user" modal component, which needs to prefill the form values with the user data (exact parent object), but I do not want to edit the parent data until I click a save button that verifies the data before emitting an input event with the new values of the object.
I do not want to manually call out each property to create a new "clean" object (if I change the data type this is a headache), but Vue is adding its reactivity to the user object and therefore modifying the value in the component updates the parent value at the same time.
I also want to wait for the server to confirm a change is saved before emitting the input event; therefore the parent won't update until the data is confirmed on the server.
Is there a recommended pattern for non-reactively modifying props in components, instead using the emitted input event to update, as per the Vue component prop/event specs?
Note: I already have a working example, save for the concern with separating the reactivity bit.
I have a situation here, the valueChanged gets called even if I change the bindable property value internally within custom element. How do I send the updated value back to viewModel from custom element without triggering valueChanged for that bindable value.
is there a way to supress this? or I have to use internal tracking if this is called from internal code or coming from view?
There is no way to prevent a bindable property's change handler method from being called based on whether the custom element's own code is assigning the property or whether it's being assigned by external code or in response to user input. You will have to roll your own internal tracking mechanism.
As Jeremy said, there's no way to prevent a bindable property's change handler from being called. However, you could attach or trigger your code only with the form input using the change.delegate or keyup.delegate properties. That would allow you to isolate your event code from the changes resulting from binding properties.
Here's a GistRun to demonstrate this:
https://gist.run/?id=11cd1e90dd912f07a60afaedb9c2613b
I have a custom element being used inside React. I want to be able to change attributes on the element from React. I also want to be able to change the same attributes from inside the element itself. Unfortunately, when the element changes its own attribute, this causes some odd side effects that I believe are related to React's virtual DOM being unaware that the attribute has changed.
To illustrate, assume we have a React render function that returns the following:
<my-component foo="bar"/>
And my-component has logic inside of it that, when the element is clicked, will change foo's value from bar to unicorn. Everything up to this point works as expected. The problem is that during the next render cycle, foo is not set back to bar. I want foo to be set back to bar.
My guess is that React's virtual DOM has bar as the cached value (it doesn't realize it has changed to unicorn) and therefore doesn't attempt to set it back to bar.
Is my understanding correct?
How do I make it so foo's value is set back to bar on the next render cycle?
You are correct about the virtual DOM. To make it behave the way you want, the custom element needs to be written in a way that supports it.
Think of this as being equivalent to controlling an <input>, where you would bind a handler to the input's onChange and either call event.preventDefault() to block any changes to the vlaue, or pass the new value back to the <input> to update the virtual DOM.
Therefore for this to work, the custom element needs to support a similar event handler.
Ok getting frustrated on this one.... Using knockoutJS to do some visual interaction stuff.
What I have is a button that is going to make an AJAX call to validate some data. That call sends back a CanProceed property as well as an object that represents other view settings. The code works when I set CanProceed(true) this turns on a DIV that has more DIVs inside it, each of those visibility properties are bound to a Permissions.AllowXXX that is set from the server.
See the fiddle for an example
http://jsfiddle.net/RcCAx/
What I want to have happen is when I get the Permissions from the server I should be able to tell knockout about the object and have the page UI update but its not working. If I declare the observable first (like with the CanProceed property) it works, but if I try and use the ko.mapping.fromJS(serverdataobject) here its not updating stuff that was bound to it earlier.
Help......
See updated fiddle for a solution. The key here is to have Permissions be an observable