74825
Question:
I'm using the <a href="https://github.com/mbest/knockout-switch-case" rel="nofollow">knockout-switch-case extension</a> plugin, and I am having a difficult time getting it to work with even the simplest of code. Using knockout 3.0, below is the code I'm using; both the <em>I'm a boolean!</em> and <em>I'm an other</em> text will be shown.
// Javascript
ko.applyBindings({type: 'integer'});
<!-- Html bindings -->
<div>
<!-- ko switch: type -->
<!-- ko case: 'boolean' -->
<span> Im a boolean!</span>
<!-- /ko -->
<!-- ko case: $else -->
<span> Im an other!</span>
<!-- /ko -->
<!-- /ko -->
</div>
Here's a <a href="http://jsfiddle.net/a5H92/" rel="nofollow">JSFiddle</a> of the code. Am I doing something incorrect in use of this plugin?
Answer1:Your problem is that the ko-switch plugin is not loaded in your fiddle.
manji solution may not work in some browser (e.g. IE11) because of mime type enforcement: github doesn't return the raw js file with a javascript mime type, which IE refuses to execute with error SEC7112.
Here's a fiddle that works. I've referenced the plugin at rawgithub.com instead (notice there's no dot like in raw.github.com):
<script src="http://rawgithub.com/mbest/knockout-switch-case/master/knockout-switchcase.min.js"></script>
<span data-bind='text:type'></span>
<div>
<!-- ko switch: type -->
<!-- ko case: 'boolean' -->
Im a boolean!
<!-- /ko -->
<!-- ko case: $else -->
<span> Im an other!</span>
<!-- /ko -->
<!-- /ko -->
</div>
<a href="http://jsfiddle.net/a5H92/1/" rel="nofollow">http://jsfiddle.net/a5H92/1/</a>
Tip: to find the error I only had to look at my browser console.
<strong>EDIT</strong>: sorry I pasted the wrong code, but the fiddle was right ;)
Answer2:You're referencing the github page of the script, not the script file itself.
Correct path: <a href="https://raw.githubusercontent.com/mbest/knockout-switch-case/master/knockout-switch-case.min.js" rel="nofollow">https://raw.githubusercontent.com/mbest/knockout-switch-case/master/knockout-switch-case.min.js</a>.
P.S.: For JSFiddle, <script> tag type attribute should be equal to text/javascript.
Demo: <a href="http://jsfiddle.net/a5H92/2/" rel="nofollow">JSFiddle</a>
