KnockoutJS vs AngularJS

Luckily (or unluckily ? ), I keep getting opportunities to work with everything  other than Angular. In my latest assignment, I have had the opportunity to work with Knockout. I have to say that I liked it and would have picked Knockout as my favorite framework if Angular did not exist.

People keep asking these questions and probably there is a good reason for it. Humans hate choices. If there are resources out there which help them make these choices easier, they like it. So, if you havent already tried the two frameworks, here are some comparisons / differences betwen the two.

Templating 

Angular and Knockout both provide DOM based templating.

Angular only supports HTML as its templating mechanism.

Knockout by default uses HTML as its templating mechanism ( which is where they both have DOM based templating ) , but Knockout also supports other string based templating engines like Handlebars etc (but I think hardly anyone uses that!).

Unobtrusive 

Knockout tries to please people who are interested in Unobtrusive Stuff.. http://knockoutjs.com/documentation/unobtrusive-event-handling.html

Angular doesnt believe in it ( or the authors of angular do not make any exceptions to provide for unobtrusive cases. )

Context 

In knockout, in order to fetch data from a context that is in the parent of your current context, you need to access it using `$parent`.

In angular, context’s inherit prototypically. So, to access something from the parent context, you dont usually have to use $parent . You only need to use $parent if you have another variable with the same name defined in your current context as well.

Directives or Custom Bindings 

Angular has directives. You can define custom elements, custom attributes, comments and classes.

Knockout doesnt allow you to create custom elements. You have to create all your bindings inside data-bind. ( I am not sure about this. Someone can correct me if I am wrong! ).

JQuery Dependency

Angular has its own version of JQuery called JQueryLite ( smaller jquery). If you include JQuery before Angular, it will use the JQuery you loaded.

Knockout does not depend on JQuery or create its own version of it. But, having said that, Knockout is a data-binding library. It does not have any opinions or implementations for doing Ajax or DOM querying. If you don’t include JQuery, you are free to do ajax and DOM manipulation either directly or with some other library.

Partitioning or creating new contexts 

Angular has a concept of controllers which allow you to create new contexts explicitly. Angular also implicitly creates context’s when using ng-repeat, ng-switch, ng-include etc. Angular’s controllers, services and its concept of DI make it extremely easy to partition and manage large applications.

Knockout doesnt allow you to create contexts explicitly (Unless you create custom bindings). Knockout implicitly creates new contexts when using for-each etc.. This also means that Knockout has no opinion regarding the overall structure of your application. Without careful planning its easy to “mess up” your code base with Knockout.

Browser support 

Angular supports all new browsers and its support goes back till IE8.

Knockout supports till IE6.

Batteries included 

Angular is a full fledged framework. It provides dependency injection, ajax, routing, cookies, promises and much more.. Angular is great for testing.

Knockout is a data-binding library. To go for a full fledged framework have a look at DurandalJS – which is a combination of Knockout, JQuery and RequireJS. Knockout was not built with testing in mind. So, it doesnt score soo many points in that department. But still, I think it wont be terrible.

Documentation 

Angular documentation covers pretty much everything it has. Angular is huge.. Its a shift in paradigm.. in the way of thinking itself. So, no matter how much documentation you have ( and we dont have enough ! ) you will always want more.. Certain core pieces are missing from the documentation.

Knockout’s documentation is the most praised in the community. But… ( yes, there is a but! )… Knockouts documentation for all the binding syntax is amazing, extensive.. But, when it comes to the utilities that knockout provides, there is zilch.. No where can you find documentation for those.. Either the documentation doesn’t exist or it is in such an obscure place that its hard to find.

IDE support and debugging support

Angular has amazing plugins available for all Intellij IDE’s. There is also a plugin available for Visual studio, which I believe is a port of the Intellij plugin. Angular also has a Google Chrome extension called Angular Batarang which allows you to select any element in the developer tools window and preview its scope variables.

Knockout doesnt have any popular IDE plugins which help in developer productivity.. I believe it is mostly because it used a single data-* attribute as opposed to Angular which uses different data-* attributes for different tasks.  In terms of plugins, Knockout too has a Google Chrome extension, but I am not sure it works as seamlessly as the Angular Batarang. I tried it, did not work very well for my use cases, so I dropped it.

If you want to debug knockout in your browser, here is a tip (Google Chrome):

F12 ( Open developer tools ) 
Select / Click on the element you want to inspect.

Open the console.

The current highlighted element is available in the console as

 $0

In the console, type

var context = ko.contextFor($0);
context

context will now have your context information for that element. This context will give you ideas of what and how you could use it in the data-bind attribute.

Community Support 

Ok, this is going to be controversial. But, I believe this is based on facts. So here it is.

Angular has a bigger community. No doubts about it. If you ask a question, there is a high probability you will get an answer.

Knockout has a comparatively much smaller community.

For me the measure of an open source projects community is a function of 3 things.

1. Github stars and forks

2. Stack Overflow questions

3. Google groups – number of posts per week and number of members.

Angular wins hands down in 1 and 2. In SO questions category, they are very close.

Ease

You should understand that Angular is a full fledged framework while Knockout is a data-binding library. There are way too many concepts in Angular and it forces you into a totally different way of thinking. This is not easy.

Learning knockout is easy. The simple things atleast. I think one of the problems with Knockout is that there aren’t many articles / blogs about it. Not in the 100′s atleast. If you need to do something obscure, you are on your own. Ofcourse asking about it on SO will help. The same is also true about Angular. But, there is a subtle difference. Angular is meant for these obscure things.. custom bindings etc.. So , over time you will find more and more documentation and blogs for it. All over the world wide web, if you look for Angular, you will see people talking about directives.. which are custom bindings.. Not the same case with custom bindings in Knockout. I am sure people use it, but they just dont talk about it much.

Variable Observation

Angular observes variables using a technique called as dirty checking. On the other hand, Knockout uses the Observable pattern. In terms of code

Angular HTML :

or

Angular javascript :

Knockout HTML :

<div data-bind="text : myContent"></div>

Knockout Javascript :

To change this content..

In Angular :

In Knockout :

Events and custom parameter passing :

Angular HTML

Angular Javascript

Knockout HTML

or

 

Conclusion

I love similes and metaphor’s.  In my Angular vs Backbone post, I said that if Angular could be consider a Motor Boat with all its complexities in machinery and mechanism, Backbone could be compared to a Life Jacket. Backbone forces you not to drown, which is why it was compared to a Life Jacket. Knockout’s focus isnt about your drowning. It is about your speed which is why it doesn’t care whether you drown or not. Images are better than words.. So here is the comparison.

Backbone : 

Backbonejs

Backbone is a life jacket

Knockout :

Knockout

Knockout is a surfboard with a motor

Angular : 

AngularJS

AngularJS is a cruise ship

50 comments on “KnockoutJS vs AngularJS

  1. >>> Knockout doesnt allows you to create custom elements. You have to create all your bindings inside data-bind.
    Knockout has “custom bindings” which is, from what I understood, similar to Angular’s directives. http://knockoutjs.com/documentation/custom-bindings.html

    About the community :
    Before I moved to Knockout, I was prompted to use Angular’s baffling architecture. But when I ran into some problem of html that updates on every model change, I couldn’t find any help, nobody answered on Google Group.
    In the following example (http://jsfiddle.net/dreadcast/PVAh2/), the slider is instantiated on every single move of the knob.
    Impossible for me.
    My code is probably wrong, but with the lack of documentation (Angular only has a function index), I couldn’t find any workaround.
    Then I checked out Knockout (and some other competitors, but I wanted some agnostic stuff that plays well with MooTools).
    Good news, Knockout only updates the content of the elements linked to the observers, not the element itself, nor the whole context.
    This reason was good enough to give up on Angular’s amazing power.

    • I said that you cannot create custom “elements” with Knockout. Say in your case.. if you wanted to use

      Directives are one of the hardest things to write in Angular. Which is also where most of its power comes from. But if you master it, you can do amazing things. Sorry to know that no one provided you help with that slider. Its a complex case.

      I am sure someone out there has already written a very generic slider. Have you looked at ngmodules.org ? If no one has written one, I guess its time I write a slider then :)

      • I honestly think that Angular is doing too much for what the front end is. If you have to go that far, that’s like recreating server side code. When you make something that sophisticated, maintainability will become an issue instantaneously. I rather see Typescript merge with Knockout JS to make JScript more object oriented with simple highspeed dev path to bind data with the GUI. That’s it! Same with ASP.NET. The reason I like Razor over ASP.NET page is the amount of flexibility that you gain. Sure takes more time to develop. But I’m not going back to fuzz around OnLoad, OnPreload, OnDatabind, OnRender …. the whole ASP.NET page life cycle and override and do stuff. It doesn’t honor static page technology. Last thing is, if you’re going that for making MVC out of JScript, might as well store your data in HTML5 features, front end database and file system.

        • The idea is to be creating as much as possible on the client side. This way you can have one server serve multiple kinds of clients ( the same REST API can be consumed by android apps, iphone apps and even a web client! ).

          The server is necessary because the control should still rest with the controller. But having the clients different will allow you to create a different view based on what kind of an interface we are coding towards. With this new architecture the Model in MVC is still with the server, since the model is the truth, its the data. The view is completely on the client. The controller is also on the client while service layers are split between the backend and the frontend.

          • he means asp.net razor (mvc or web pages) versus asp.net web forms.

            asp.net is really a huge toolbox supporting event model programming via web forms, mvc or mvvm models or a php style which is known as web pages (my favorite of the 3 since its closest to asp classic)

  2. Cue: Knockout advocates correcting the article author. “You fool! Knockout does support [XYZ] – I wrote a hack for it and it’s on my private repo! How could you not know this?! ;o”

    • Cue: Angular advocates making straw man comments about Knockout advocates.

      I thought the post was pretty fair and balanced. The only quibble I have is about making custom bindings in Knockout. It’s been a while since I made one, but from what I remember, it was pretty easy to do by following the sample bindings. Also, although Angular claims that creating directives is a unique feature, I don’t think it would be difficult to do something similar with a custom binding in Knockout. Might not have the same syntax, but I don’t really see that as a problem.

      • The point is Angular cannot do something unique that was never possible before. Come on.. Its still in javascript. It cannot do un-javascript-y stuff . You could write something like a directive in knockout too, even in jquery if you wish, or even in plain vanilla javascript. The question is how easy it is. Once you know how to write directives, you will be using them like a breeze everywhere. On the other hand knockout does have custom bindings and you could work with it, but it is not heavily advertised as something to use.

        • So it boils down to how much google has advertised directives. Knockout supports custom elements as well as bindings atleast in 3.0.
          When ever you write the most simple application you end up needing directives or bindings. I was able to find related stuff easily and was able to update stuff as needed with community support of knockout,
          I always hear praises of angular on simple stuff but when the going gets tough you start to drown.

  3. Knockout is quick easy to learn well documented and easily ties in with various widget libraries grids, charts tree views and the like. It also has error checking built in it doesn’t fail silently. It is well supported and is richer in terms of the leverage you can get in terms of time. The tools are awesome.

    • I am assuming you havent used Angular ( and its set of tools – which is what makes it soo desirable ) or you wouldnt be raving about the tools available to knockout.

      • Hi All,
        I am thinking to move our Web Application to one of the framework but totally confused which one to use Knockout or Angular. Both are new for me and had to learn. Currently My Applications are based on XML Data Island supported in IE only. Now I have to migrate my Web Applications to any of the framework. Can someone suggest me which one is best and easy to use.
        Thanks & Regards,
        Sachin Kumar

        • Which of them is the best is a choice you will have to make yourself most of the time. People can only give you the pro’s and cons as I have attempted to do here.
          If you asked me personally, I would choose to go with Angular any time as long as I DONT have to support IE < 8. If you want to support older version of IE then I would suggest KnockOut.

  4. Nice comparison! I think you should update the section on custom bindings since it’s misleading in an otherwise good piece, as above posters have mentioned. Also, I’d like to add that although you *can* use custom bindings (which are very powerful), named templates can be a much simpler alternative.

    Another minor point of comparison: Angular supports running in a page annotated with a no-eval Content-Security-Policy, whereas Knockout does not.

  5. Nice article.
    I have no practical experience with angular but judging from the docs, tutorials and this article angular is too magical for my taste. I’m going to stay with knockout.

  6. I recently switched from Backbone to Angular. The only thing I really miss is Handlebars, but otherwise it has been a sweet ride. One of the biggest issues I’ve had so far with Angular is the lack of tutorials and examples. I guess it is a relatively new framework so time should fix that.

  7. Nice post. I tend to agree with “Not Ted” though about you selling short Knockout bindings. They have been a core feature of KO since the start. Over the couple of years of using KO, more and more of my code has moved into custom bindings.

    Also – on the contentious issue of support, I agree with you about the numbers on SO etc. My experience though is that I’ve never been left wanting for KO support. There are quality people behind the tool who’ve helped me with some pretty ‘out there’ issues.

    KO is extremely elegant. It’s a class act 100%. It takes a lot of skill to resist building a cruise ship when all that was really needed was a powered surf board. Mind you, in this case it’s a powered surf board with freaking laser beams and a warp core!

    • I also agree KnockoutJS is elegant. After leaving Apache Flex, I was very worried what could work and retain the binding experience. Through another Flex developer I learned about it. It blew my mind. It has been a jewel for me. I was thinking I could get the same joy doing another framework such as BackboneJS but it couldn’t compare. As long as anyone can understand and see the benefit of building your own custom bindings, you have alot of juice to do your work. Andy why not expand when it’s needed to use other utilities such as PagerJS and DurandalJS

  8. Hi guys,
    Pretty impressed by these new frameworks / paradigms.
    Recently i started with NodeJS wow what an eye openener i come from C#, php/html/js, apache and IIS world and having all that in one in nodejs for me was WOW amazing !
    I spent few nights playing with knockout and i kind of liked it though my initial logic after trying the tutorials of KO didn’t work out of the box…
    Not long ago I discovered Meteor and Sails.js and i statrted to get confused what part angular and KO lets say get in the big picture of Sails or Meteor.
    It’s probably a stupid question but if it is you do realize my confusion…
    Is there anyone that could help me get rid of this mental turmoil :D

    Thanks in advance and Raj thanks for summing it up for the mere mortals :D

    Cheers,
    Guby

    • Sail.js is a Server side framework. Its a framework on top of NodeJS. If you consider NodeJS, PHP, Ruby, Python to be equivalent, then Sail.js , Rails, Django will be equivalent. These frameworks allow you to write code which specifies what happens when a particular HTTP request comes in. For example, if you consider twitter.. Think about one of these running on twitter’s servers. Now when you put the following in the browsers url

      http://twitter.com/search/?q=angularjs

      The OS Notices that the call is on port 80. It finds out which software is listening on port 80 ( here its a web server ) and calls that software.. Now we get to write the code to respond USING one of these frameworks.

      Client side MVC’s are totally different. Examples of Client side are Angular, Knockout, Backbone etc. They sit on the client ( your browser ). They help you in writing logic that runs here.

      Meteor is a totally different thing. It sits on both the client and server side.

      So, comparing Sailjs, nodejs and AngularJS doesnt help much because they can all co-exist .. While Knockout and Angular cannot co-exist in the same application ( You can do that too.. But in my opinion ..It doesnt make sense ).

      • Thanks Raj, that clears a lot of my confusion. I am playing around with nodejs and i love it.

        Correct if I am wrong. Actually you can combine node with a sails and use angular to take care of the client side logic and use experience. something like that ?
        Does it sound as a way to go? … or grab meteor when it’s ripe enough for production and accomplish the same thing with meteor’s pros and cons ?

        One more time thanks for you explanation :D

        Guby

  9. If you wrote your knockout binding like this:


    Save

    You missed the idea of the MVVM pattern. It *should* be as straightforward as this:


    Save

    Further, custom binding handlers are a cinch:


    ko.bindingHandlers.textCurrency = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var value = valueAccessor();
    var valueUnwrapped = ko.utils.unwrapObservable(value);
    $(element).textCurrency(valueUnwrapped);
    }
    };

    With $.textCurrency() being an extension method on jQuery. Then your binding could look like this:

  10. A while ago i gave knockout a try and i was stuck in some areas loosing hours and days in frustration and i ultimately resolved to hacks to get stuff working. I am not very good at javascript so the reason i gave it a try was to improve my javascript skills as well, however is is my limitation i am trying to tackle.

    I started Angular 2 days ago and I feel at ease with it and the code It just works (apart silly bugs of course). I started out with the building a todo app tutorial and I could follow along easily, then i moved on to modify the code and create something different and thing are looking pretty cool. I know its basic stuff but what i want is an interactive ui and the basic stuff is enough to get the job done.

    I personally find the paradigm of angular easier to follow, cannot say that about knockout so I’ll be sticking to angularJS and recommend it to others too.

  11. I don’t agree that Knockout is easy. After you go through all the model view crap and push JSON data into ko.observables then replace tags such as options in a select control with data-bind you end up being stuck with only one way to get something as simple as a selected value out of the control attribute and that is through knockout again.

    I wanted to load my select list then have the option of getting my selected value through a standard JavaScript get element by ID selected index value. I could not because the data-bind did not create a properly formatted tag.

    The argument that it is easy and non obtrusive is not necessarily true. It may be compared to Angular but this language is not unobtrusive. It creates a layer of dependency that is highly coupled. Working with these script languages is bad enough as there is no IDE intelliscense and no check on syntax that is correct for a desired result.

    I have complete control over Java class methods and/or C#/VB.NET methods and avoid trying to do too much on the client side because of unreliable script languages. Knockout and languages like them only fuel the fire.

    • I agree with you that Knockout isn’t “easy”. It has a particular convention to follow in the wire-up and binding of DOM elements to the underlying data model, just like almost all other frameworks. Given that, if you take the trouble to instantiate a ko.observable for a select element’s data source, why would you then not go back to the model to see which option was selected? Using knockout, you have everything you need to detect changes made on the UI — there’s really no need to have to access the select element via vanilla JavaScript.

      Having said that, I do believe that “unobtrusive” is a relative term — so I think I agree with you there to a point. But, to your last point – yes, you do have complete control over Java / C# class methods — but unless your user base is willing to accept full page refreshes and vanilla rendering of HTML with very little (if any) client side interactions (like validation, in-app notifications, real-time async updates, etc) — then you have little choice but to use some type of client-side framework.

      We use Java + JSP / Spring MVC / Hibernate / AWS + EC2 for our server stack, and rely on front-end libraries like jQuery, Knockout, Sammy and Handlebars to render performance-optimized, scalable, data-driven front ends that support heavy CRUD operations with a heavy focus on the overall user experience of the application.

      I think it’s one of those cases where the disciplines between backend and frontend development are sufficiently different that they do, indeed, require unique skillsets. It’s absolutely possible to be excellent at both, but not without sufficient investment in time to understand and appreciate the intricacies of both.

  12. Your community-size comparisons might be a little misleading because the size measure you’re using is sensitive to a project’s scope. Because Angular is a full-blown framework, it’s going to generate more Q&A traffic than Knockout which is a much-more-focused view-binding tool; much of that traffic is going to be about the things that Knockout doesn’t do.

    • Not really true. If your argument is to do with functionality ( as in how much each framework provides ) then you should have a look at Backbone – which has close to 12k questions as of today.

      The amount of questions out there is indicative on the number of answers to questions that are already there. I know for a fact that there are a lot of duplicates in SO questions but sometimes these duplicates dont matter since the scenarios are different. The more questions ( and corresponding answers ) you have the higher is the probability that the problem you are facing has been asked ( and hence, hopefully solved already! ).

  13. Thanks for your post- I have a question – we still work on iE 8 which doesnot support html5 – can you recommend a framework for client side which will work on ie8 and has a widget library tied into it. I looked into AngularUi – it uses HTML 5 – cannot use it directly with ie8 – if there is hack – can you please tell me, if not what other client side framework with widget library I can use ?

    • Both Angular and Angular UI work on IE8. I have myself built enterprise grade applications utilizing Angular UI.

      If you are interested in something older ( like IE7 or IE6 ) then perhaps Knockout is a better choice. I believe there are some widget libraries for Knockout as well. But you will have to figure out which ones work on < IE8.

  14. Commonly I don’t read publish about sites, but I would wish to express that this write-up quite required me to think about as well as undertake it! Your current way of writing may be surprised everyone. Thanks a lot, really nice post.

  15. As for as questions on Stack Overflow, sometimes less is more. It’s like saying I like this package because they are way more bugs reported. Did you ever stop and think that Knockout users didn’t need to go up and find help nearly as often because it is in fact simpler and better documented? Also, in all honestly, stars don’t mean much on github. Knockout had over 1 million downloads within 3 months of release 2.0, it’s extremely popular. And despite guys like us that might be hip to everything more developers do not have github accounts than do.

  16. Pingback: KnockoutJS vs AngularJS | Next Big Thing | Programming Blog

  17. Great comparison done here

    It seems that angularjs has a slight edge when compared to rest of the frameworks, its browser compatibility ratio is amazing. It is also a perfect framework when it comes to helping developers to manage respective websites. The framework is met with constant evolution and that too for good. This is something that should keep any developer in the hunt.

    Thanks,

  18. A nice comparison. but most of us came here to find a knife – and a sharp one..
    Now, I am very new to SPA. But I spent over two weeks of just reading and comparing what to use and where to use. I think the most important thing which you need to add to that comparison is the focus on which UI design pattern each of those libraries is trying to circle around.
    It seems (to me at least) that Angular-JS is focusing to MVC while Knockout is focusing to MVVM, for SPA – MVVM is better than MVC.
    The 2nd point which you mentioned but in my opinion should be explored further is the fact the Angular-JS is dependent on JQuery to operate. This means that every time you get to a serious bug – you will have to ask yourself is it sourcing out from the JQuery or the AngularJS part.. the fact that AngluarJS is importing its own JQuery version is not only a fact this may be a problem that the authors of Angular anticipated – it is also a sloppy solution to that problem.. I mean, if a bug occurred – it will not matter to you that they provided you with version they developed with – you still going to suspect if it related to JQuery or not just the same.. not mention that if you use other libs that may dependent on JQuery that problem going to escalate.
    So in my opinion, for those two reasons Knockout truly knocks out :)

    • MVC or MVVM has nothing to do with naming things ( Angular names its “controllers” as controllers while in Knockout we generally name things as ViewModel ). I would argue that both are MVVM without question. Angular provides you a nice place to manipulate your ViewModel i.e the controller.

      AngularJS is not dependent on JQuery to operate. While Angular is happy to work with JQuery if it is already present,it does not mandate it. If you are an advanced developer who knows his way around javascript then I would ask you NOT to include JQuery at all. JQuery is just a crutch and should probably be avoided. It allows you to think of ways to achieving stuff which are design wise a better solution. Angular and JQuery are some of the most popular javascript libraries right now. If a bug occured in something as simple as a selection mechanism then it would be reported asap and fixed.

      If you are building any non-trivial component with knockout, you are bound to find people who fall back to using jquery for dom manipulation. While Knockout and Angular work on the same principle, I would strongly advice people to stay away from JQuery when doing knockout as well, especially for DOM Manipulation. But, you probably NEED to include jquery in this scenario because how else are you going to do your ajax calls ?

  19. Hi there,

    Thank you very much for your full coverage of this topic. I have a question please:

    In the company I work, we develop interactive presentation web apps using Html and JavaScript. Here are some features of our app:
    * our data-binding is only one-way from data source ( a JSON file) to view, and we never update data source in our apps.
    * users never add/update data in our apps. (after deploying the app, the data source is a fixed dataset that never changes).
    * we rarely use input elements, like textboxes and checkboxes, in our apps (except simple contact forms, that saves data locally)

    so basically we want to switch to a simple framework of data-binding.
    Based on our requirements, which framework do you recommend? I would really appreciate it if you can give us a very brief explanation.

    Regards,
    Sia

    • To be frank, any of the major frameworks will work for you. Two way data-binding is not the only thing you should consider when choosing the frameworks. You should also look at how easy it is for you and your team to get up and running with that particular framework, how complex are the json’s that you are rendering in the view etc..

      Even if it one way binding I would still recommend angular because of its ability to work with simple objects ( as opposed to getter setters ).

  20. I have problem with Knockout js.Could any one help me.

    While i am trying to edit the page the drop-down vlaues are setting/pointing it to right values some times some times not.My guess is the dropdown loading functions are not executing sequence manner .here is my code.Pls hemp me out.
    ///
    ///
    ///

    var vBuidPK = -1;

    function GetEmptyUBRAM() {

    var varlcd = [{ BURAMIdPK: 0, BUIDFK: 0, Asof: "", CRMP: "", Underwriting: "", RiskMonitoring: "",
    RiskIdentification: "", Criticizedassetsmgmt: "", LevelofRisk: "", TrendofRisk: "",
    Processdesing: "", ProcessEffective: "", Comments: "", QAComments: "", EPMID: "", EPMStatus: "", CCEID: "",
    CCEStatus: "", CCEComments: "", IsProcessStart: false, CreatedBy: "", CreatedDate: "", LastModifiedBy: "", LastModifiedDate: "",
    EMPModified: "", CCEModified: ""
    }
    ];
    return varlcd;
    }
    function tblUBRAMDetails(data) {
    this.BURAMIdPK = ko.observable(data.BURAMIdPK)
    this.BUIDFK = ko.observable(data.BUIDFK)
    this.Asof = ko.observable(data.Asof)
    this.CRMP = ko.observable(data.CRMP)
    this.Underwriting = ko.observable(data.Underwriting)
    this.RiskMonitoring = ko.observable(data.RiskMonitoring)
    this.RiskIdentification = ko.observable(data.RiskIdentification)
    this.Criticizedassetsmgmt = ko.observable(data.Criticizedassetsmgmt)
    this.LevelofRisk = ko.observable(data.LevelofRisk)
    this.TrendofRisk = ko.observable(data.TrendofRisk)
    this.Processdesing = ko.observable(data.Processdesing)
    this.ProcessEffective = ko.observable(data.ProcessEffective)
    this.Comments = ko.observable(data.Comments);
    this.QAComments = ko.observable(data.QAComments)
    this.EPMID = ko.observable(data.EPMID)
    this.EPMStatus = ko.observable(data.EPMStatus)
    this.CCEID = ko.observable(data.CCEID)
    this.CCEStatus = ko.observable(data.CCEStatus)
    this.CCEComments = ko.observable(data.CCEComments)
    this.IsProcessStart = ko.observable(data.IsProcessStart)
    this.CreatedBy = ko.observable(data.CreatedBy)
    this.CreatedDate = ko.observable(data.CreatedDate)
    this.LastModifiedBy = ko.observable(data.LastModifiedBy)
    this.LastModifiedDate = ko.observable(data.LastModifiedDate)
    this.EMPModified = ko.observable(data.EMPModified)
    this.CCEModified = ko.observable(data.CCEModified)
    }

    function BURAMVIEW() {
    var tabs = $(“#tabs”).tabs({
    select: function (e, i) {
    selected_tab = i.index;
    }
    });
    var self = this;
    self.BuRAMs = ko.observableArray();
    self.CRMP = ko.observableArray();
    self.UNDER = ko.observableArray();
    self.RM = ko.observableArray();
    self.RID = ko.observableArray();
    self.CRTICIZED = ko.observableArray();
    self.PROCESSDESIGN = ko.observableArray();
    self.PROCESSEFFECT = ko.observableArray();
    self.GETUBRAMDTLS = ko.observableArray([]);

    self.LEVELOFRISK = ko.observableArray();
    self.TRENDOFRISK = ko.observableArray();
    self.EPMSTATUS = ko.observableArray();
    self.CCESTATUS = ko.observableArray();
    self.TRENDOFRISK = ko.observableArray();
    self.LEVELOFRISK = ko.observableArray();
    self.MANGERS = ko.observableArray();

    //For control flow.
    self.LOGINID = ko.observable();
    self.LOGINROLEID = ko.observable();

    this.LoadInitalData = function () {

    $.ajax({
    type: “POST”,
    data: {},
    url: “../BURAMPages/CreateEditUBBURAM.aspx/GetAllBusinessUnit”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: function (response) {
    if (response != “”) {
    self.BuRAMs(response.d);
    }
    }
    });
    $.ajax({
    type: “POST”,
    data: ko.toJSON({ scode: “CH6″ }),
    url: “../AQReviewPages/LineCard.aspx/GetAllDivisions”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: function (response) {
    if (response != “”) {
    self.CRMP(response.d);
    self.UNDER(response.d);
    self.RM(response.d);
    self.RID(response.d);
    self.CRTICIZED(response.d);
    self.PROCESSDESIGN(response.d);
    self.PROCESSEFFECT(response.d);
    }
    }
    });
    $.ajax({
    type: “POST”,
    data: ko.toJSON({ scode: “CH36″ }),
    url: “../AQReviewPages/LineCard.aspx/GetAllDivisions”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: function (response) {
    if (response != “”) {
    self.LEVELOFRISK(response.d);
    }
    }
    });
    $.ajax({
    type: “POST”,
    data: ko.toJSON({ scode: “CH7″ }),
    url: “../AQReviewPages/LineCard.aspx/GetAllDivisions”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: function (response) {
    if (response != “”) {
    self.TRENDOFRISK(response.d);
    }
    }
    });
    $.ajax({
    type: “POST”,
    data: {},
    url: “../BURAMPages/CreateEditUBBURAM.aspx/GetAllMangerList”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: function (response) {
    if (response != “”) {
    self.MANGERS(response.d);
    }
    }
    });

    $.ajax({
    type: “POST”,
    data: ko.toJSON({ scode: “CH46″ }),
    url: “../AQReviewPages/LineCard.aspx/GetAllDivisions”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: function (response) {
    if (response != “”) {
    self.EPMSTATUS(response.d);
    self.CCESTATUS(response.d);
    }
    }
    });
    }

    this.LoginDetails = function () {
    $.ajax({
    type: “POST”,
    data: {},
    url: “../BURAMPages/CreateEditUBBURAM.aspx/GetLoginDetails”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: function (response) {
    if (response != “”) {
    self.LOGINID(response.d[0].UserPK);
    self.LOGINROLEID(response.d[0].LoginUserRoleId);
    self.GetControlFlow(0);
    }
    }
    });
    }

    //Adding empty values for the first time
    self.GETUBRAMDTLS(GetEmptyUBRAM());
    this.EditUBDetails = function () {
    GetUBBURAMDtlsByID(vBuidPK);
    }
    this.GetControlFlow = function (vEMPID) {
    //For Examiners…
    if (self.LOGINROLEID() == 6 && self.LOGINID() != vEMPID) {
    $(“#ddlepm”).prop(“disabled”, true);
    $(“#ddlepmstatus”).prop(“disabled”, true);
    $(“#ddlccestatus”).prop(“disabled”, true);
    }
    //For CCE
    else if (self.LOGINROLEID() == 5) {
    $(“#ddlepm”).prop(“disabled”, true);
    $(“#ddlepmstatus”).prop(“disabled”, true);
    $(“#ddlccestatus”).prop(“disabled”, false);
    }
    //For Admin
    else if (self.LOGINROLEID() == 1) {
    $(“#ddlepm”).prop(“disabled”, false);
    $(“#ddlepmstatus”).prop(“disabled”, false);
    $(“#ddlccestatus”).prop(“disabled”, false);
    }
    else if (vEMPID > 0 && self.LOGINID() == vEMPID) {
    $(“#ddlepm”).prop(“disabled”, true);
    $(“#ddlepmstatus”).prop(“disabled”, false);
    $(“#ddlccestatus”).prop(“disabled”, true);
    }
    else if (self.LOGINROLEID() == 3) {
    $(“#ddlepm”).prop(“disabled”, true);
    $(“#ddlepmstatus”).prop(“disabled”, false);
    $(“#ddlccestatus”).prop(“disabled”, true);
    }
    if (self.LOGINROLEID() == 6 && self.GETUBRAMDTLS()[0].IsProcessStart == true && vEMPID == 0) {
    $(“#txtcomments”).attr(‘disabled’, true);
    $(“#txtQAcomments”).attr(‘disabled’, true);
    $(“#txtccecomments”).attr(‘disabled’, true);
    }
    else if (vEMPID > 0) {
    if (self.LOGINROLEID() == 6 && self.GETUBRAMDTLS()[0].IsProcessStart() == true) {
    $(“#txtcomments”).attr(‘disabled’, true);
    $(“#txtQAcomments”).attr(‘disabled’, true);
    $(“#txtccecomments”).attr(‘disabled’, true);
    $(“#chksubmit”).attr(‘disabled’, true);
    $(“#btnBURAMSave”).attr(‘disabled’, true);

    }

    else if (self.LOGINROLEID() == 6 && self.GETUBRAMDTLS()[0].IsProcessStart() == false) {
    $(“#txtcomments”).attr(‘disabled’, false);
    $(“#txtQAcomments”).attr(‘disabled’, true);
    $(“#txtccecomments”).attr(‘disabled’, true);
    }
    }
    else if (self.LOGINROLEID() == 6 && self.GETUBRAMDTLS()[0].IsProcessStart == false && vEMPID == 0) {
    $(“#txtcomments”).attr(‘disabled’, false);
    $(“#txtQAcomments”).attr(‘disabled’, true);
    $(“#txtccecomments”).attr(‘disabled’, true);
    }
    else if (vEMPID > 0 && self.LOGINROLEID == vEMPID) {
    $(“#txtcomments”).attr(‘disabled’, false);
    $(“#txtQAcomments”).attr(‘disabled’, true);
    $(“#txtccecomments”).attr(‘disabled’, true);
    }
    else if (self.LOGINROLEID == 3) {
    $(“#txtcomments”).attr(‘disabled’, false);
    $(“#txtQAcomments”).attr(‘disabled’, true);
    $(“#txtccecomments”).attr(‘disabled’, true);
    }
    else if (self.LOGINROLEID == 5) {
    $(“#txtcomments”).attr(‘disabled’, true);
    $(“#txtQAcomments”).attr(‘disabled’, true);
    $(“#txtccecomments”).attr(‘disabled’, false);
    }
    else if (self.LOGINROLEID == 1) {
    $(“#txtcomments”).attr(‘disabled’, false);
    $(“#txtQAcomments”).attr(‘disabled’, false);
    $(“#txtccecomments”).attr(‘disabled’, false);
    }
    else {
    $(“#txtcomments”).attr(‘disabled’, false);
    $(“#txtQAcomments”).attr(‘disabled’, true);
    $(“#txtccecomments”).attr(‘disabled’, false);
    }
    }
    function GetUBBURAMDtlsByID(vBuidPK) {
    $.ajax({
    type: “POST”,
    data: ko.toJSON({ ipBuidPK: vBuidPK }),
    url: “../BURAMPages/CreateEditUBBURAM.aspx/GetBUDetailsByID”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: function (results) {
    if (results.d.length > 0) {
    var vResults = $.map(results.d, function (item) { return new tblUBRAMDetails(item) });
    self.GETUBRAMDTLS(vResults);
    self.GetControlFlow(self.GETUBRAMDTLS()[0].EPMID())
    }
    else { self.GETUBRAMDTLS(GetEmptyUBRAM()); }
    },
    error: function (err) {
    alert(err.responseText + ” – ” + err.statusText);
    }
    });
    }

    function InsUpdateBBURAMDtls() {
    $.ajax({
    type: “POST”,
    data: ko.toJSON({ data: self.GETUBRAMDTLS, ipRoleID: self.LOGINROLEID }),
    url: “../BURAMPages/CreateEditUBBURAM.aspx/SaveUBRAMDetails”,
    contentType: “application/json; charset=utf-8″,
    success: function (result) {
    vBuidPK = result.d;
    GetUBBURAMDtlsByID(vBuidPK);
    },
    error: function (err) {
    alert(err.statusText);
    }
    });
    }

    self.SaveUBRAMDtls = function () {
    InsUpdateBBURAMDtls();
    }
    }; //End View..
    $(document).ready(function () {
    $(“#txtasof”).datepicker();
    var vBURAMView = new BURAMVIEW();
    vBuidPK = 1;
    ko.applyBindings(vBURAMView);
    vBURAMView.LoadInitalData()
    vBURAMView.LoginDetails();
    vBURAMView.EditUBDetails();
    });

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>