MVVM binding with Vue.js does not work as expected - javascript

I'm currently making a dynamic-sized editable list component in a form.
I have at least one input field shown which is responsible for the creation of new fields as you type. If you type anything else than a whitespace character, the value of this field is added to the model and then reseted.
On the next tick, Vue updates the view and create the new input field with the letter you typed in, and I give the focus to this field so the user can continue typing as-if nothing happened for him.
So when the field is created, the model gets a new item which has the letter you typed in as its value. The problem is that when you edit the created field, the model isn't updated.
I made a JSFiddle so you can check it by yourself
itemBlured: function (idx) {
console.log(vm.songs[idx].name); // Always print the same letter for a given field
}
The final goal of the itemBlured method is to remove the last edited entry in the model if its value is empty. But for now you can see, by opening your dev console that even if you change the value of a field, the Vue model isn't updated.
Any help or idea is welcome :)

I found the reason why the binding did not occured.
When dealing with <input> tags, you must use the v-model attribute instead of value to tell Vue.js to bind the input to your model, otherwise it just act as mustache template.
Hope it helps someone one day.

Related

React final form change function doesn't work correctly

I'm trying to play around with React-Final-Form library, Here is my sandbox link : https://codesandbox.io/s/nice-vaughan-czk7g9?file=/src/index.js
When I click on 'Change' button, I want the country field (coming from the initialValues) to be get set or its value should get changed to the new given value. But what's happening is, country's existing value gets picked up and a new object key-value pair with key as "country's existing value" and value as the new value given gets appended.
Could someone helps what's wrong I'm doing here and how could I change the value of the field via change function.
Thanks.

Issue with record.setFieldValues() in SuiteScript Emptying Field Values

Ok, so I have a user event script attached to a custom record. One of the fields on this custom record is a select field for item records. In the user event script, it's getting the value of this field, checking the item options on the selected item. As it runs through the values, it checks to see if it's missing certain values and adds them if necessary. The problem I'm having is that it's ultimately setting the item options field to blank. I've tried both with loading the record, setting the values, then saving, and also by trying to just set a single value with nlapiSubmitField(). The outcome is the same both ways. Here's a quick rundown of the code:
var itemId = customRec.getFieldValue("custrec_item_field");
var itemRec = nlapiLoadRecord("noninventoryitem", itemId, { recordmode : "dynamic" });
var optArray = [ "CUSTCOL_OPT1" , "CUSTCOL_OPT2" , "CUSTCOL_OPT3" , "CUSTCOL_OPT4" ];
itemRec.setFieldValues("itemoptions", optArray);
nlapiSubmitRecord(itemRec, true, true);
Now, a few months back I was certain this was working correctly, and if I apply similar login to a user event BeforeSubmit function when the item record saves, everything works as intended. I'm sure I could get this to work by triggering an edit on the item record within a Suitelet called from the original user event, but that seems ridiculous. There are no errors encountered unless I pass in the item option values through in lower case. Am I missing something? Or am I just going to have to find a way to trigger this outside of this user event function?
There was a flaw somewhere else that was clearing the options out because it mistakenly thought the selected value had changed.

Group JQuery Selector by element type

When using the .each function with JQuery like below is there anyway to automatically group the results by type to save some time;
$(selector).each(function () {
//do stuff here for each found
});
The above will obviously go through each found element one by one but with the logic within my code I'm just detecting what field type the field is and I would action each field type to do the same thing. I'm just trying to save doing all the logic for the same field type over and over again.
To detail a little more, I have a value and it needs to go into may different fields types. Simple text fields are fine as they're just insert in using .val() but for other default and custom fields that I have such as picklists and multi-select boxes I need to do some logic around the value for these fields so the appropriate values are set, but not all these type fields don't exist so don't want to do the necessary logic beforehand if those fields don't actually exist. So if I had 50 picklist fields I would obviously only want to do that logic once and set the values for all picklist fields to this value(s) that the logic had set. I just thought they're might be a simple method of JQuery that I'm missing here?!
You can do some manual testing and run your code a different way
var all = $(selector),
text = all.filter('[type="text"]'),
select = all.filter('select');
text.val(someValue);
if (select.length){ // select elements exist
// do logic and apply to all
select.val(selectSpecificValue);
}

Can you make an Ember.TextField wait until change to update its value binding?

I extended an Ember.TextField to include a date picker. A function that observes the text field’s value attempts to parse the string in the text field and update a date property. This is all fine and good when you use the date picker, but if you were to try to type a date into the box, it goes crazy because the value gets updated on every keydown (or keyup or whatever Ember’s default event to update the value bindings for a TextField), and it immediately re-updates the value of the text field with the nicely-formatted date string that came from what it just parsed. Example:
Input says 10/26/2014
You insert your cursor after 2014 and hit backspace
The value has changed, so a handler parses 10/26/201 and updates a date property
The date property has changed, so a handler formats the date as MM/d/yyyy and sets the value
The input now says 10/26/0201
Rather than changing the way those handlers work, all my problems would be solved if I could tell Ember to update the value binding when the input’s change event fires, rather than trying to update everything on every keystroke. I know this can be done in AngularJS and Knockout, but I can’t find anything about it for Ember.
EDIT
I know I can change the way my code works to avoid this specific problem. At this point, I’m more interested for purposes of edification, in a yes-or-no answer that specifically addresses the question that is the title of this post. I’m starting to think the answer is no, but wanted to poll the community.
I wrote a blog post that may offer some solutions about Date Pickers And Validation In Ember with examples here is one of the JSBins from the post.
Write your own extension of text field component and add the change callback.
App.DateTextComponent = Em.TextField.extend({
change: function(event){
var value = this.get('value');
// massage data
value += "foo";
this.set('value', value);
}
});
Example: http://emberjs.jsbin.com/suzami/2/edit
If you really want to get a call when the value changes after the fact, don't observe the value, use actions.
App.DateTextComponent = Em.TextField.extend({
change: function(event){
var value = this.get('value');
this.sendAction('changed', value);
}
});
{{date-text value=foo changed='fooChanged'}}
Example: http://emberjs.jsbin.com/suzami/3/edit?html,js,output

Removing items from an ngList in Angular

I'm using ngList within an text box to get and post data to my server. The issue I've found is that while I can directly affect the generated array by removing indexes, when removing an item this way, the string in the input field is left unaffected.
The problem here is that as soon as the text field is modified, whatever is contained in that field immediately updates the model, restoring whatever items were removed.
http://plnkr.co/edit/EqkWwyLwvHrrhT6epOYP?p=preview
Does anyone have a solution for updating the string within the text field to match the model as the model is updated? My thought was to use an $apply either on my function or within a $watch but in both cases I got $apply in progress errors.
$scope.states.splice(index, 1);
It will not update ng-list because the change mechanism only invoked if previous value is not equal current value strictly...
So if you will create new instance instead of the splice current one nothing will be invoked because it is the same array instance so replace this code with the current one and it will be what you want...
var tmpList = angular.copy($scope.states);
tmpList.splice(index, 1);
$scope.states = tmpList;
and here is PLUNKER

Categories