{"action":"created","issue":{"url":"https://api.github.com/repos/knockout/knockout/issues/1710","labels_url":"https://api.github.com/repos/knockout/knockout/issues/1710/labels{/name}","comments_url":"https://api.github.com/repos/knockout/knockout/issues/1710/comments","events_url":"https://api.github.com/repos/knockout/knockout/issues/1710/events","html_url":"https://github.com/knockout/knockout/pull/1710","id":59124960,"number":1710,"title":"Allow Dynamic and Static Classes with CSS Binding","user":{"login":"someyoungideas","id":1868262,"avatar_url":"https://avatars.githubusercontent.com/u/1868262?v=3","gravatar_id":"","url":"https://api.github.com/users/someyoungideas","html_url":"https://github.com/someyoungideas","followers_url":"https://api.github.com/users/someyoungideas/followers","following_url":"https://api.github.com/users/someyoungideas/following{/other_user}","gists_url":"https://api.github.com/users/someyoungideas/gists{/gist_id}","starred_url":"https://api.github.com/users/someyoungideas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/someyoungideas/subscriptions","organizations_url":"https://api.github.com/users/someyoungideas/orgs","repos_url":"https://api.github.com/users/someyoungideas/repos","events_url":"https://api.github.com/users/someyoungideas/events{/privacy}","received_events_url":"https://api.github.com/users/someyoungideas/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/knockout/knockout/labels/affected:%20most","name":"affected: most","color":"40c840"},{"url":"https://api.github.com/repos/knockout/knockout/labels/api","name":"api","color":"000000"},{"url":"https://api.github.com/repos/knockout/knockout/labels/severity:%20minor","name":"severity: minor","color":"e17d81"},{"url":"https://api.github.com/repos/knockout/knockout/labels/type:%20feature","name":"type: feature","color":"207de5"}],"state":"closed","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/knockout/knockout/milestones/9","html_url":"https://github.com/knockout/knockout/milestones/Post%203.4.0","labels_url":"https://api.github.com/repos/knockout/knockout/milestones/9/labels","id":1230563,"number":9,"title":"Post 3.4.0","description":"For issues that were included in 3.4.0 originally but will be postponed to a future release.","creator":{"login":"mbest","id":1230364,"avatar_url":"https://avatars.githubusercontent.com/u/1230364?v=3","gravatar_id":"","url":"https://api.github.com/users/mbest","html_url":"https://github.com/mbest","followers_url":"https://api.github.com/users/mbest/followers","following_url":"https://api.github.com/users/mbest/following{/other_user}","gists_url":"https://api.github.com/users/mbest/gists{/gist_id}","starred_url":"https://api.github.com/users/mbest/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbest/subscriptions","organizations_url":"https://api.github.com/users/mbest/orgs","repos_url":"https://api.github.com/users/mbest/repos","events_url":"https://api.github.com/users/mbest/events{/privacy}","received_events_url":"https://api.github.com/users/mbest/received_events","type":"User","site_admin":false},"open_issues":16,"closed_issues":3,"state":"open","created_at":"2015-07-29T00:01:59Z","updated_at":"2015-11-25T21:58:21Z","due_on":null,"closed_at":null},"comments":14,"created_at":"2015-02-26T19:10:04Z","updated_at":"2015-12-03T21:03:44Z","closed_at":"2015-11-25T21:58:21Z","pull_request":{"url":"https://api.github.com/repos/knockout/knockout/pulls/1710","html_url":"https://github.com/knockout/knockout/pull/1710","diff_url":"https://github.com/knockout/knockout/pull/1710.diff","patch_url":"https://github.com/knockout/knockout/pull/1710.patch"},"body":"I am wanting to apply a CSS binding with both a dynamic and static class. I have been reading around on forums for solutions to this and I guess I am looking for a reason not to find a way to implement this into the library. If it is a principle of the library to not support this, that answer would be fine as well. The only way I could think of handling this would be to allow the CSS binding to take an array that contains strings or objects that then get handled appropriately by the binding to apply the classes.\r\n\r\nThanks"},"comment":{"url":"https://api.github.com/repos/knockout/knockout/issues/comments/161783828","html_url":"https://github.com/knockout/knockout/pull/1710#issuecomment-161783828","issue_url":"https://api.github.com/repos/knockout/knockout/issues/1710","id":161783828,"user":{"login":"juuxstar","id":1746268,"avatar_url":"https://avatars.githubusercontent.com/u/1746268?v=3","gravatar_id":"","url":"https://api.github.com/users/juuxstar","html_url":"https://github.com/juuxstar","followers_url":"https://api.github.com/users/juuxstar/followers","following_url":"https://api.github.com/users/juuxstar/following{/other_user}","gists_url":"https://api.github.com/users/juuxstar/gists{/gist_id}","starred_url":"https://api.github.com/users/juuxstar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/juuxstar/subscriptions","organizations_url":"https://api.github.com/users/juuxstar/orgs","repos_url":"https://api.github.com/users/juuxstar/repos","events_url":"https://api.github.com/users/juuxstar/events{/privacy}","received_events_url":"https://api.github.com/users/juuxstar/received_events","type":"User","site_admin":false},"created_at":"2015-12-03T21:03:44Z","updated_at":"2015-12-03T21:03:44Z","body":"While a simple implementation, IMO having two bindings which do the same thing adds confusion (especially in the exact case when you need to use both at once since it doesn't matter which you use for the static and which for the dynamic bindings and thus somehow implies that one binding does something else than the other)\r\n\r\nI ran into this issue last year and solved it by slightly tweaking the existing css binding to accept an array of values, which can either be Strings or objects (to support both dynamic and static classes in the same binding):\r\n\r\n```\r\nvar classesWrittenByBindingKey = '__ko__cssValue';\r\nko.bindingHandlers['class'] = ko.bindingHandlers['css'] = {\r\n    'update': function (element, valueAccessor) {\r\n        var classes = ko.unwrap(valueAccessor());\r\n        var classString = [];\r\n\r\n        if (!(classes instanceof Array)) classes = [ classes ];\r\n\r\n        classes.forEach(function(clazz) {\r\n            if (clazz !== null && typeof clazz == 'object') {\r\n                ko.utils.objectForEach(clazz, function(className, shouldHaveClass) {\r\n                    ko.utils.toggleDomNodeCssClass(element, className, ko.unwrap(shouldHaveClass));\r\n                });\r\n            }\r\n            else classString.push(String(clazz || '')); // Make sure we don't try to store or set a non-string value\r\n        });\r\n\r\n        if (classString.length > 0) {\r\n            classString = classString.join(' ');\r\n            ko.utils.toggleDomNodeCssClass(element, element[classesWrittenByBindingKey], false);\r\n            element[classesWrittenByBindingKey] = classString;\r\n            ko.utils.toggleDomNodeCssClass(element, classString, true);\r\n        }\r\n    }\r\n};\r\n```\r\n\r\nso you would thus call it like this:\r\n```\r\n<div data-bind=\"css : [ 'static-class-' + 1, { 'visible' : isVisible() } ]\"></div>\r\n```"}}