Tracking changes in the properties of the Js object using dirtyFlag from the KoLite package
To track changes in the ViewModel object, dirtyFlag , which is part of the KoLite library, can help, which in turn extends the knockout capabilities by adding new features:
- dirtyFlag - designed to track changes in both the individual and in the aggregate properties of the ViewModel
- asyncCommand - designed to execute asynchronous commands
- activity - designed to indicate activity. Used with asyncCommand
')
Description
Two people wrote the knockout extension library package: Hans Fjällemark and John Papa
View source codes and examples here .
An example of using dirtyFlag to detect changes in a ViewModel object
For example, take the following ViewModel object:
function Vm(){ var user = { name : ko.observable('Alexey'), email : ko.observable('alexey@mail.me'), address : ko.observable('Moskow st. Petrov 12'), awards : ko.observableArray([new Award('silver','The best speaker'), new Award('gold','Brain Storm #2')]) }, dirtyFlag = ko.DirtyFlag(user); return { user : user, dirtyFlag : dirtyFlag, modelStatus : ko.computed(function(){ return dirtyFlag().isDirty() ? "Changes detected" : "No changes"; }), clearDirty : function(){ dirtyFlag().reset(); } } }; This ViewModel uses the
dirtyFlag property, which will track changes in values ​​within the compound user property. In order to indicate what exactly the user property will be used for tracking, the following construction is used: ko.DirtyFlag(user); . After binding the model, dirtyFlag will track changes in the user property. In order to get the data “dirty” status you need to call dirtyFlag().isDirty() . isDirty () returns true if changes are detected and false otherwise. If the user has made changes and then returned the data to its original state, then isDirty returns false, since it preserves the initial state of the properties being analyzed (that is, a copy of the object data). This is clearly seen when looking at the dirtyFlag code.Below is the full code of the example in which you can verify the capabilities of dirtyFlag.
HTML example code
<div class ="userform" data-bind="with: user"> <h4>Test user information</h4> <label>Name</label> <input type="text" data-bind="value: name"/> <label>E-mail</label> <input type="text" data-bind="value: email"/> <label>Address</label> <input type="text" data-bind="value: address"/> <div class="awards-title"> <h4>Awards:</h4> </div> <div class="userAwardForm" data-bind="foreach: awards"> <div class="userAwardForm"> <label>Type of award:</label> <input type="text" data-bind="value: awardType"> <label>Name of Contest</label> <input type="text" data-bind="value: contestName"> </div> </div> </div> <div class="dirty-status"> <span>Dirty status: </span><a href="#" data-bind="text: modelStatus(), css: {ok : !dirtyFlag().isDirty(), nok : dirtyFlag().isDirty()}" class="modern"></a> </div> <input type="button" class="Button" value="Reset dirty status" data-bind="click: clearDirty"> JavaScript example code
$(function() { function Award(atp, contestNamev){ var awardType = ko.observable(atp), contestName = ko.observable(contestNamev); return { awardType : awardType, contestName : contestName } } function Vm(){ var user = { name : ko.observable('Alexey'), email : ko.observable('alexey@mail.me'), address : ko.observable('Moskow st. Petrov 12'), awards : ko.observableArray([new Award('silver','The best speaker'), new Award('gold','Brain Storm #2')]) }, dirtyFlag = ko.DirtyFlag(user); return { user : user, dirtyFlag : dirtyFlag, modelStatus : ko.computed(function(){ return dirtyFlag().isDirty() ? "Changes detected" : "No changes"; }), clearDirty : function(){ dirtyFlag().reset(); } } }; ko.applyBindings(new Vm()); });​ CSS example code
body{ background-color: #456192 ; margin:20px; } label{ display:block; color: white; } div.userform, div.userAwardForm{ padding: 10px; border: solid white 1px; } div.userAwardForm{ margin-top: 10px; } div.userform h4{ font-weight : bold; font-size:24px; margin-bottom: 15px; color: white; } .awards-title{ margin-top:10px; } .modern { height: 40px; padding: 0 5px; line-height: 40px; font-size: 14px; font-weight: bold; color: white; text-shadow: -1px -1px 0 #333; border-radius: 3px; text-decoration:none; } .ok{ background: -moz-linear-gradient(#84AB69, #334823); background: -webkit-linear-gradient(#84AB69, #334823); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#84AB69', endColorstr='#334823')"; } .nok{ background: -moz-linear-gradient(#ED3812, #7A1F05); background: -webkit-linear-gradient(#ED3812, #7A1F05); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED3812', endColorstr='#7A1F05')"; } .dirty-status{ height: 50px; } .dirty-status span{ color: white; } .Button { position: relative; cursor: pointer; display: inline-block; border: 1px solid #d5d5d5; text-decoration: none; font: 16px Arial; font-weight: bold; text-align: center; text-shadow:0px 0px 0px #444444; background: #ffffff; padding: 10px 16px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #c13737; -moz-box-shadow:inset 0px 0px 0px; -webkit-box-shadow:inset 0px 0px 0px; box-shadow:inset 0px 0px 0px, 0 3px 0 #aeaeae, 0 5px 0 #c13737, 0 8px 0 #aeaeae, 0 10px 6px rgba(0,0,0, .60); } .Button:hover { background: #eeeeee; color: #eb5e7f; -moz-box-shadow:inset 0px 0px 0px; -webkit-box-shadow:inset 0px 0px 0px; box-shadow:inset 0px 0px 0px , 0 3px 0 rgba(235,94,127, .30), 0 3px 0 #aeaeae, 0 5px 5px #eb5e7f, 0 5px 0 #eb5e7f, 0 8px 0 rgba(235,94,127, .15), 0 8px 0 #aeaeae, 0 10px 6px rgba(0,0,0, .60); } .Button:active { transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); -webkit-transform: translateY(2px); -moz-box-shadow:inset 0px 0px 0px; -webkit-box-shadow:inset 0px 0px 0px; box-shadow:inset 0px 0px 0px, 0 3px 0 rgba(235,94,127, .30), 0 3px 0 #eeeeee, 0 5px 5px rgba(#eb5e7f, .65), 0 5px 0 #eb5e7f, 0 6px 0 rgba(235,94,127, .15), 0 6px 0 #eeeeee, 0 6px 6px rgba(0,0,0, .65); } In the example, as an indication, the inscriptions are displayed: “No changes” - if changes are not detected and “Changes detected” - if changes are found. As well as changing the background on which the inscriptions are displayed for display.
On the example form, there is a button “Reset dirty status” , which demonstrates the work of the
reset method of the dirtyFlag ViewModel property. In order for the current changes to be accepted as basic, you need to call dirtyFlag().reset(); .Conclusion
I think that this library will help to track changes on the necessary properties of the ViewModel with ease.
Thanks for attention!
PS Picture to post painted myself :)
Source: https://habr.com/ru/post/150695/
All Articles