74825

Knockout switch-case plugin is not hiding/showing the correct value

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>

Recommend

  • Knockout/Select2: Triggering select2 to update based on an observable option updating
  • How to use jQuery in a Knockout.js Template?
  • numpy 64bit support in PTVS and numpy System.Int64 casting
  • ng-repeat not working with table but works with list
  • OpenCV Python: Draw minAreaRect ( RotatedRect not implemented)
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Cordova Apache wrong module path
  • text-align justify, cannot override
  • Angular - routerLinkActive and queryParams handling
  • Is there a Windows socket API call / option to “block” a range of ports à la SO_EXCLUSIVEADDRUSE
  • Is it possible to get the word under the mouse cursor in a ``?
  • Correct implementation of List Iterator methods
  • cell spacing in div table
  • Can I use AllJoyn Framework for Wifi Direct in iOS?
  • Silverlight DependencyProperty.SetCurrentValue Equivalent
  • How to run “Deployd” on port 80 instead of port 5000 in webserver.
  • Android full screen on only one activity?
  • How to clear text inside text field when radio button is select
  • FileReader+canvas image loading problem
  • Ajax Loaded meta Tags
  • Insert into database using onclick function
  • Dynamically accessing properties of knockoutjs observable array
  • Deselecting radio buttons while keeping the View Model in synch
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Accessing IRQ description array within a module and displaying action names
  • Resize panoramic image to fixed size
  • Join two tables and save into third-sql
  • How to model a transition system with SPIN
  • Weird JavaScript statement, what does it mean?
  • ORA-29908: missing primary invocation for ancillary operator
  • Web-crawler for facebook in python
  • File upload with ng-file-upload throwing error
  • Free memory of cv::Mat loaded using FileStorage API
  • Java static initializers and reflection
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Converting MP3 duration time
  • Conditional In-Line CSS for IE and Others?