JSFiddle - React, Tailwind, and code Playground

by BrianVallelunga

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://sugarjs.com/release/1.2.5/minified/sugar-1.2.5.min.js"></script>
<div id="view">       
    <p><select name="color" data-bind="source: availableColorsWithoutViewModelArray"></select></p>
    <p>The above shows "Blue" and "Green" as options because Kendo doesn't touch the inner array.</p>
    <br />
    <p><select name="color2" data-bind="source: availableColorsWithViewModelArray"></select></p>
    <p>The above should show "Blue" and "Green" as options, but errors because the view model's colors field does not have the exclude method added by the Sugar library.</p>
</div>

CSS

p { font-family: Arial, Helvetica, sans-serif; }

JavaScript

var viewModel = {
    colors: ["Red", "Blue", "Green"],
    availableColorsWithViewModelArray: function() { return this.colors.exclude("Red"); },
    availableColorsWithoutViewModelArray: function() {
        return ["Red", "Blue", "Green"].exclude("Red");
    }     
};

kendo.bind("#view", viewModel);