It is written in docs, that
The <Field/> will rerender any time the field state it is subscribed to changes.
So, if I'd have several Fields, all of them will be re-rendered, while changing only one of them.
Are there any ways to prevent re-renders of other Fields, that are not changing at the moment?
Yes, that's because your entire form is rerendering. Your question is exactly the reason that Final Form was designed from the ground up to allow fine grained render control.
Here's a video of me explaining it last month.
Check out this example of how to do it.
Another workaround is to use React.memo (react version >= 16.6.0)
Make each input field a separate component an wrap it in memo.
export default React.memo(MyInputComponent);
If you are passing values down to MyInputComponent, pass only the needed prop value not the whole form data object.
<MyInputComponent value={formData.myValue} />
This way the MyInputComponent will re render only if formData.myValue has changed.
Related
My program flow requires that I first set the value of a select option in the Viewmodel and then I load the available options into the Viewmodel. This causes problems, typically the first available option will be seen in the selection list after this, while the selected option value stays at the specified value.
I was hoping that setting the new "valueAllowUnset" would help, but instead my page becomes unresponsive when using it.
Therefore I currently set the original value again after loading the options. Strangely, this only works when I set the value, set a different value and then set the value again, e.g.
self.data()[field](orgValue);
self.data()[field]({});
self.data()[field](orgValue);
(I store values for multiple selection lists in the self.data observable and access them with the property index "field".)
I tried to strip this down to a simple JSFiddle (http://jsfiddle.net/timvdh/HN6DE/), but the behavior does not show there, although the example pretty much resembles my actual application. However, I am using about 30 select lists there.
So I was hoping, that someone can make an educated guess about what goes wrong in my application, I am hoping that the fact that I have to set the original value three times maybe gives a clue.
EDIT: This fiddle demonstrates, that setting the selected option before and after filling the options list does work with "valueAllowUnset": http://jsfiddle.net/timvdh/HT5Tp/
I am using JQuery Mobile with knockout.js and that caused the problem (sorry I did not even think about JQM being the problem in the first place). I am now setting the option before filling the list and after filling the list I call
$("#selectmenuID").selectmenu("refresh");
to display the option.
The hanging browser was not caused by knockout, there are additional subscriptions to the selectmenus in my app. "valueAllowUnset" changed the behavior of the selectmenus and triggered loops caused by problems in my code.
I have a custom list. Each item in the list has 39 fields/columns that need to be filled out and a 40th field that gets filled out by a separate workflow.
I have another workflow that I need to trigger if any of the fields change EXCEPT for one.
Why? Because that field has a custom ID# in it and that field gets populated AFTER the form is submitted. Therefore, there will ALWAYS be a change in the list item. Thus, I need a workflow to trigger when any fields change EXCEPT the one w/ the custom ID#.
Any ideas? Thank you.
No one has been able to answer this but I figured it out myself.
I'm including the answer here in case anyone else ever comes across this and finds it helpful:
Create a new field that you will hide from the your SP list and from NewForm.aspx, EditForm.aspx, and DispForm.aspx.
Using jQuery, populate that hidden field as such: $(":input[Title='fieldName']").val("1");
The using an SPD workflow, check to see if that field = 1. If so, run the workflow. AND at the end of that workflow set the field to 0 - that's important.
Angular newb here, thoughts appreciated...
Say I want an input field to control the window title as you type. A field with a model binding and no associated controller acts on keypress, as intended. However, there has to be a bit more logic to it -- default value before any user input, also used if the input is blanked.
Adding a controller bound to enclosing elements gives a place for that logic, but the change-on-keypress behavior is gone. I'm sure it's possible to recreate it by hand or with ui, but since it's inherently there without the controller, I'm wondering if I'm missing the simple clean way.
Simple version, acts on keypress, but with no smarts:
<title ng-bind-template="{{windowTitle}}">Default Title (not seen)</title>
<input ng-model="windowTitle" type="text">
Putting controller bindings on the head (for the title) and a containing div (for the input), and setting a default $scope.windowTitle inside the controller function does use that default value, but it breaks the auto-update.
I know in real life you'd want a real model, but what I'm really trying to understand is these two ways angular appears to work. I haven't found anything specifically describing two different implicit input binding behaviors, but I haven't been through all the docs yet.
How should I be thinking about this?
Edit: It's not the window title or default value per se that I'm interested in. I'm trying to understand this:
When there's no controller on either the field or the title, typing in the field changes the window title immediately, on keypress. The title is directly linked to the field value, with no other angular hookup.
With controller bindings around the title and the field, typing in the field has no effect on the title.
What I've since realized (I think) is that ng-controller bindings create a new instance of the controller each time. Here's the non-working code I didn't show before:
<title ng-controller="TitleCtrl" ng-bind-template="{{windowTitle || 'Foo'}}">Foo</title>
...
<label ng-controller="TitleCtrl">
<input ng-model="windowTitle" type="text">
{{windowTitle}}
</label>
The value set by the model binding to the field is shown correctly within that instance of that controller, and updates on keypress, as before. But since those two controller instances are separate, the binding to the title works but the data it points to isn't bound to the field.
Isn't that right? The reason it works with no controllers is that that makes the value global, so the title binding sees the value set by the field binding.
So what's the canonical way to reference data from some other area? Create a service?
I realize that this is basic angular stuff, just getting started here, so thanks!
Edit 2
On reflection, I've come to seriously disrespect this whole question, even though I wrote it.
It's based on way-too-early poor understanding of the Angular application model. I had worked through only part of the official tutorials, and jumped ahead to removing all the js from a not big but not totally trivial existing app, and exploring what Angular could to in that context.
I got some very quick bang for the buck, getting several pieces of functionality working with very little code, and simple, clear markup, felt good. But I really had short-circuited internalizing the Angular way of thinking, and my quick and dirty no-architecture approach broke down when different parts of the page needed to coordinate with each other, as in this question.
I've postponed that project while I go back to tutorials and other learning. If other folks think this question should be deleted, I'd add my vote. Or maybe it's a useful on some level, ignorant though it is.
Well, there are multiple ways to achieve the behavior you want without using an explicit controller and model, you could:
<title ng-bind-template="{{windowTitle && windowTitle || 'default'}}"></title>
Or in a more simple way:
<title>{{windowTitle && windowTitle || 'default' }}</title>
In both cases, we're using the conditional expression:
(condition) && (answer if true) || (answer if false)
You should however strive to remove logic from the templates.
I needed to create a input mask for a jQuery datepicker in my Rails app, where the first form field uses m/d/yy format and the datepicker populates a hidden input with the proper database format.
I was using SimpleForm, and so I extended my own input so that the input is preceded by the mask.
I got everything set up and when checking out the browser, it all just worked well before I thought I would be done.
The form ends up with two inputs for the same attribute, each with the same id and name. I never thought this would work. Checking the development log I only see one date getting submitted, the second of the two which is the one that has the proper format for the database.
Is this all okay? Should I take some extra steps even though this appears to work fine, and more importantly, can someone explain what's going on under the hood that results in this behavior?
Thanks!!
Rails uses the Hash params to store fields submitted. When you declare two or more inputs using the same name, it happens the same as if you do something like
h=Hash.new
h[:name]="foo"
h[:name]="bar"
Result is bar because the foo was overwritten. So the "winner" is always the field value which the browser last appended to postdata.
But if I where you, I would not rely on the browser that the second field gets appended at last.
I have a difficult situation.
I let the the user create a form through a Rich Text Editor and then I save this.
So for example, I save this literally into my DB:
http://pastebin.com/DNdeetJp (how can you post HTML here? It gets interpreted, so now I use pastebin...)
On another page I wrap this in a form_tag and it gets presented as it should be.
What I want to do is save this as a template and save the answers as a hashmap to my DB.
This works well, but the problem is I want to recreate what checkbox/radiobutton/... is selected when the user goes back to the page. So I want to fill the form with the answers from the hashmap.
Is there a way to use a 'dummy' model or something else to accomplish this?
Thanks!
Since you're pasting in raw HTML which is not properly configured as a template, it is more difficult to enable the proper options based on whatever might be stored in your DB.
The reliable approach to making this work is to use Hpricot or Nokogiri to manipulate the bit of HTML you have and substitute values accordingly. This isn't too hard so long as you can define the elements in that form using a proper selector. For example, create a div with a unique id and operate on all input elements within it, comparing the name attribute with your properties. There may even be a library for this somewhere.
The second approach is to use JavaScript to enable the options in much the same fashion. This seems like a bit of a hack since the form itself will not have a proper default state.