KnockoutJS: Stop a particular property from setting dirty flag - javascript

With some help from StackOverflow community I was able to get my dirty flag implementation to work, based on this example: http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html
It does exactly what I want, except for a single use case that I don't know how to solve.
Basically I have a select menu that gets automatically populated from the database. This select menu also has an option to make an Ajax call to my back end and have the list of options refreshed, database updated and return the result. This is where things get hairy for me.
First method works fine, however, it has to re-index and re-apply my entire viewModel and takes about 2-3 seconds, running on a local machine with 16gigs of ram and SSD.
jsondata.component.available_tags = result.available_tags;
ko.mapping.fromJS(jsondata, viewModel);
Second method also works, and pretty much instantaneous, however, it sets of isDirty() flag, which I would like to avoid, because this data is already coming from the database and I wont need to save it. I can not use isDirty.reset() method either, because if isDirty was set by something else before I clicked an menu option to update available_tags, it will reset that too. Which I would also like to avoid.
viewModel().component.available_tags(result.available_tags);
My question is: With the first method, can I force UI refresh with ko.mapping.fromJS() on a particular element and not entire dataset? Or, with a second method, can I avoid setting isDirty flag set when available_tags are updated? The twist is that I still need to keep available_tags as an observable, so the select menu is automatically generate/updated.
UPDATE: I was able to update mapping for that one single element with
ko.mapping.fromJS(result.available_tags, {}, viewModel().component.available_tags);
but that immediately set off isDirty flag... Argh

In addition to Tomalak's suggestions, which I totally agree with, maybe the toJSON method can help you out in similar cases where you don't want to split the model. If your dirty flag implementation uses ko.toJSON as a hash function, as Ryan Niemeyer's does, you can give your model (on which the dirty flag is active) a toJSON method, where you do something like this:
function MyObjectConstructor() {
this.someProperty = ko.observable();
this.somePropertyNotUsedInDirtyFlag = ko.observable();
}
MyObjectConstructor.prototype.toJSON = function () {
var result = ko.toJS(this);
delete result.somePropertyNotUsedInDirtyFlag;
return result;
};
Please be aware that this is also used to serialize the object in some other occassions, such as ajax calls. It's generally a handy function for removing computeds and such from your objects before using them in a different context.

Related

Clone sapUi5 json model and stop binding

I have seen a similar question, but in my case it doesn't work.
I have a JSON model, called data, which corresponds to a SAPUi5 form with comboboxes. I want to copy the state of the model the first time I open my application and keep it like that. After that I want to use it to reset my form and bring the comboboxes back to their default values.
When I first start my application:
this.getView().setModel(new JSONModel(data)); //create the original model
//copy the original model (copyModel is global variable
copyModel = $.extend({}, data);
Until here everything is fine. The two models are exactly the same. After that I have a button and a reset Function:
resetP: function(){
this.getView().setModel(new JSONModel(copyModel));
console.log(copyModel);
}
The first time I select something in the comboboxes and click the reset button and run the reset function, the copymodel is the right one. Same with the original data model. When I change again the selected value of the combobx, the copyModel, starts taking the selected value. Somehow it's overwritten. I don't know what I am doing wrong. Are there any suggestions? I have also tried to use JSON.strignify instead of extend.
JSON models be default have two way binding. So when you are triggering events like selectionChange on the ComboBox, because of two way binding, the set data to the model keeps getting updated. Also Javascript has objects by reference, so it is the original copyModel object that gets updated.
You can prevent this by setting a copy of the copyModel to the JSON model.
Another thing I would like to mention is that do not keep setting the model again and again.
You can just update the data that is set to the model and update the model.
This can be done in 2 ways.
a.
resetP: function(){
this.getView().getModel().setData(copyModel);
console.log(copyModel);
}
b. You could also update the required property and do a
this.getView().getModel().updateBindings();
We use jQuery.extend(true, {}, object_to_copy); in this way to create a "deep copy" from the object we want an independed copy from.

Can't write to a knockout observable

I am having a very strange bug when I am trying to update a user's address. I have this simplified address object with two fields, both observables:
stateProvince.name = ko.observable("");
stateProvince.code = ko.observable("");
Now, when I try to update both of these later, this is the effective program execution in dev tools:
stateProvince.name("New York");
stateProvince.code("NY");
but the second line does not actually change the value of the state code. no exceptions occur, attempting to change it in dev tools does not work, and the strangest part is that everything that fails when changing the code works fine when changing the name. What conditions could cause a knockout observable from failing to update with no errors? I am trying to extend an existing codebase but my searching has not revealed anything that would differentiate these two objects.
Moving from comment to answer:
If code is bound to a select and you are using the value binding (usually with options), then Knockout tries to enforce that your observable's value corresponds to an option. Make sure the your initial values corresponds to an option.
If your options are getting populated later, then you will need to either re-populate the selected value, or you can pre-populate it on the initial load with something like:
this.code = ko.observable(data.code);
//pre-populate with the one matching value
this.codeOptions = ko.observableArray([data.code]);

Checking for any dirty Backbone model data within collection

I have a requirement to "nag" a user about unsaved changes when they switch between different Backbone collection models (by clicking on a table row). I've googled for "check backbone model dirty data" (for instance) and not found anything definitive.
I accomplished this using underscore's "some" and isEqual functionality, in a manner such as the following, "some()" being sufficient to determine if there are any un-saved changes (as opposed to what those precise changes might be), in particular because the model attribute is actually an array of objects.
var anyDirty = _.some(myCollection.models, function(model) {
return !_.isEqual(model.get('nodes'), model.previousAttributes()['nodes]);
});
I am new to Backbone and am wondering if this is an accepted sort of approach for adhoc checking for dirty model data. Or, does Backbone provide some sort of built in functionality for this purpose, that my initial attempts at googling did not reveal?
I have another attribute I need to monitor in addition to 'nodes', so I'm switching to using changedAttributes(): http://backbonejs.org/#Model-changedAttributes:
var anyDirty = _.some(myCollection.models, function(model) {
return model.changedAttributes();
});
What may make this an imperfect solution is that it seems like it will return an object of changedAttributes even if the attribute got changed back to it's original value. So it almost seems that what I need in the long run is to take a snapshot of the original data and compare against that. Still though, using model.changedAttributes() is a more concise alternative to what I first posted.

AngularJS binding between variables

I've got a list of users which I retrieve from my service. When I select any user I can see and edit info (email, roles, etc). The problem is that I don't want these changes to affect user's data in the list, I want to update data only after saving (clicking a button).
Now I'm using two variables:
$scope.selected - currently selected user
$scope.editable - variable for storing the data I'm editing
And I exchange data like this:
$scope.initEditable = function ()
{
$scope.editable = {};
$.extend($scope.editable, $scope.selected);
}
Looks like a terrible solution. What is the proper way to do it?
Actually, this is the Angular-way of approaching this problem, you are on the right track. In scenarios like yours one would typically:
Copy an item upon selection (edit start) - this is what you do with editable
Have 2-way data binding changing a copy (or an original element)
Upon edit completion we can propagate changes from a copy to the original
The nice things about this pattern is that we can easily:
Offer the 'cancel' functionality where users can revert their changes
Be able to compare a copy and the original and drive parts of the UI based on this comparison (for example, we could disable a 'Save' button if there were no changes)
So, I don't think at all that this approach is terrible. The only suggestion I could have is to use angular's angular.copy method instead of $.extend.

With Backbone.js, how to Bind to an array's changes w/o needing to manually trigger?

I'm creating an invitation dialog that allows users to enter emails. Currently in the model I am creating an array to hold the emails:
initialize : function() {
this.model.set({
invite_email_array : new Array()
});
}
And then I'm adding/removing items in the view like so:
this.model.get('invite_email_array').push('email#domain.com');
Then problem is the binder is not being triggered when I either add or remove an email from the model. Here is my binder:
binder : function() {
model.on("change:invite_email_array", onInviteEmailArrayChange() )
}
The only way I was able to get the binding to trigger was to trigger it manually when I make updates.. an ugly hack
this.model.trigger("change:invite_email_array");
Any suggestions on a better way to maintain a list of emails and then be able to bind to the object on add/removes?
Thanks
In the example you give, you're bypassing set by altering the array directly. In order to trigger the change, you would need to set the altered array after pushing the new e-mail. Something to the effect of:
var arr = _.clone(this.model.get('invite_email_array'));
arr.push('email#domain.com');
this.model.set({ invite_email_array: arr });
As soon as you've introduced an array, however, it may be worth considering whether the view's design is really reflecting its intent. Collections (or arrays) of anything often signal that it's time to consider simplifying models or views. Even though a single e-mail seems too trivial assign to its own view/model, it may make sense to track an array of e-mails as a collection of "invitation" views and watch for changes accordingly.

Categories