Knockout switch-case plugin is not hiding/showing

问题:

I'm using the knockout-switch-case extension 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 I'm a boolean! and I'm an other 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 JSFiddle of the code. Am I doing something incorrect in use of this plugin?

回答1:

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>

http://jsfiddle.net/a5H92/1/

Tip: to find the error I only had to look at my browser console.

EDIT: sorry I pasted the wrong code, but the fiddle was right ;)

回答2:

You're referencing the github page of the script, not the script file itself.

Correct path: https://raw.githubusercontent.com/mbest/knockout-switch-case/master/knockout-switch-case.min.js.

P.S.: For JSFiddle, <script> tag type attribute should be equal to text/javascript.

Demo: JSFiddle