{"_id":"knockout-switch-case","_rev":"3-9c2969652e7c834a9d07d3c9ebe3968f","name":"knockout-switch-case","description":"Powerful control flow bindings for Knockout","dist-tags":{"latest":"2.1.0"},"versions":{"2.1.0":{"name":"knockout-switch-case","version":"2.1.0","homepage":"https://github.com/mbest/knockout-switch-case","authors":["Michael Best <mbest@dasya.com>"],"description":"Powerful control flow bindings for Knockout","main":"knockout-switch-case.js","keywords":["knockoutjs","switch","case"],"license":"MIT","ignore":["**/.*","node_modules","bower_components","spec"],"dependencies":{},"_id":"knockout-switch-case@2.1.0","scripts":{},"_shasum":"c9ebc5f30d83e09821f403f93081fcfffe089cf2","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.5.0","_npmUser":{"name":"veikedo","email":"veikedo@gmail.com"},"dist":{"shasum":"c9ebc5f30d83e09821f403f93081fcfffe089cf2","tarball":"https://registry.npmjs.org/knockout-switch-case/-/knockout-switch-case-2.1.0.tgz","integrity":"sha512-MKqxvXk3VSkerbrLVip/Fb1946N2yOsDDOAzN6JOYakDnvotPfSEFU7st4pNnEVj7yVqOlQxf5oFFjJLIjjL/A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9mNDYx0bsVJWSbZUr9hE8SQQqPrfNE9ikwtp7X3M54AiEA1Wr5P35oL7YIvIk+w3cvGqPOZVtsITCh8OQVfWEafvc="}]},"maintainers":[{"name":"veikedo","email":"veikedo@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/knockout-switch-case-2.1.0.tgz_1479109620279_0.19008355494588614"}}},"readme":"### **SWITCH/CASE** bindings for [Knockout](http://knockoutjs.com/)\r\n\r\n*Knockout* includes only the `if` and `ifnot` bindings for control flow. The `switch` and `case` bindings provide a flexible and powerful control flow mechanism that can simplify your code.\r\n\r\nLet's start with some examples. Here we want to display a different message based on a status value:\r\n\r\n```html\r\n<div data-bind=\"switch: orderStatus\">\r\n    <div data-bind=\"case: 'shipped'\">\r\n        Your order has been shipped. Your tracking number is <span data-bind=\"text: trackingNumber\"></span>.\r\n    </div>\r\n    <div data-bind=\"case: 'pending'\">\r\n        Your order is being processed. Please be patient.\r\n    </div>\r\n    <div data-bind=\"case: 'incomplete'\">\r\n        Your order could not be processed. Please go back and complete the missing data.\r\n    </div>\r\n    <div data-bind=\"case: $default\">\r\n        Please call customer service to determine the status of your order.\r\n    </div>\r\n</div>\r\n```\r\n\r\nHere's an equivalent example using source data values:\r\n\r\n```html\r\n<div data-bind=\"switch: true\">\r\n    <div data-bind=\"case: trackingNumber\">\r\n        Your order has been shipped. Your tracking number is <span data-bind=\"text: trackingNumber\"></span>.\r\n    </div>\r\n    <div data-bind=\"case: isReady\">\r\n        Your order is being processed. Please be patient.\r\n    </div>\r\n    <div data-bind=\"casenot: isComplete\">\r\n        Your order could not be processed. Please go back and complete the missing data.\r\n    </div>\r\n    <div data-bind=\"case: $else\">\r\n        Your order could not be processed. Please go back and complete the missing data.\r\n    </div>\r\n</div>\r\n```\r\n\r\nA *switch* block can contain any number of *case* blocks. No more than one *case* block will be used. The contents of the remaining blocks will be cleared. Both `switch` and `case` take a single parameter. In most cases the values of the two parameters are matched against each other to determine which case block to use. The first block (top-down) to match is used; subsequent blocks are cleared. Here, in detail, is how the values are matched:\r\n\r\n1. If the *case* value is the special value `$else` or `$default`, the block is used if no non-default blocks were used. There can be multiple blocks with `$else` or `$default` and they can be in any order.\r\n1. If the *switch* value is boolean (`true` or `false`), each *case* value's \"truthiness\" is matched against the *switch* value.\r\n1. If the *case* value is boolean (and the *switch* value is not boolean), the *case* value is used as is. The special variable `$value` can be used in a *case* expression to refer to the *switch* value. The block will be used if the expression is true.\r\n1. If the *case* value is an array, the block will be used if the *switch* value matches (strict) an item in the array.\r\n1. Otherwise, the block will be used if the *case* value matches the *switch* value (loose comparison).\r\n\r\nIf you want a block to be used based on the parameter not matching, you can use the `casenot` binding. This works similarly to `case`, except that the result of the value matching is reversed.\r\n\r\nHere are some more examples. This example demonstrates items 1, 3, 4, and 5 above and uses container-less bindings:\r\n\r\n```html\r\n<!-- ko switch: somevalue -->\r\n<!-- ko case: $default -->\r\n    Value doesn't match\r\n<!-- /ko -->\r\n<!-- ko case: 'foo' -->\r\n    Value is foo\r\n<!-- /ko -->\r\n<!-- ko case: 'bar' -->\r\n    Value is bar\r\n<!-- /ko -->\r\n<!-- ko case: ['baz', 'qux'] -->\r\n    Value is either baz or qux\r\n<!-- /ko -->\r\n<!-- ko case: $value.length == 3 -->\r\n    Value is a three-letter word\r\n<!-- /ko -->\r\n<!-- /ko -->\r\n```\r\n\r\nThis example demonstrates item 2 (also see the second example above):\r\n\r\n```html\r\n<!-- ko switch: isReady -->\r\n    <div data-bind=\"case: true\">You are ready!</div>\r\n    <div data-bind=\"case: false\">You are not ready!</div>\r\n<!-- /ko -->\r\n```\r\n\r\n### Controlling visibility instead of inclusion\r\n\r\nYou can use the `case.visible` and `casenot.visible` bindings to conditionally show an element. For example:\r\n\r\n```html\r\n<!-- ko switch: true -->\r\n    <p data-bind=\"case.visible: isReady\">You are ready!</p>\r\n    <p data-bind=\"case.visible: $else\">You are not ready!</p>\r\n<!-- /ko -->\r\n```\r\n\r\n### Switch shortcut when using Knockout 3.x\r\n\r\nWhen using Knockout 3.0+, you do not need to include the `true` value for the `switch` binding. For example:\r\n\r\n```html\r\n<!-- ko switch -->\r\n    <!-- ko case: 'abc' -->Value matched<!-- /ko -->\r\n    <!-- ko case: $else -->Value didn't match<!-- /ko -->\r\n<!-- /ko -->\r\n```\r\n\r\n### Extending `switch/case` to control other UI aspects\r\n\r\n`ko.bindingHandlers.switch.makeCaseHandler` can be used to create new bindings that control any UI aspect. It returns a new binding handler object that you should assign to a `ko.bindingHandlers` property. It takes three parameters:\r\n\r\n* `binding` This is the name of the binding to wrap (`case` wraps the `if` binding, for example).\r\n* `isNot` (optional) If set to *true*, the new binding will reverse the result of the value matching (like `casenot`).\r\n* `makeValueAccessor` (optional) If the wrapped binding needs the value specified in a certain format, you can provide a function that accepts a `value` parameter and returns a `valueAccessor` function. The default looks like this:\r\n`function (value) { return function() { return value } }`\r\n\r\nLicense: MIT (http://www.opensource.org/licenses/mit-license.php)\r\n\r\nMichael Best<br>\r\nhttps://github.com/mbest<br>\r\nmbest@dasya.com\r\n","maintainers":[{"name":"veikedo","email":"veikedo@gmail.com"}],"time":{"modified":"2022-06-19T09:05:35.556Z","created":"2016-11-14T07:47:02.307Z","2.1.0":"2016-11-14T07:47:02.307Z"},"homepage":"https://github.com/mbest/knockout-switch-case","keywords":["knockoutjs","switch","case"],"license":"MIT","readmeFilename":"README.md"}