Knockout Tutorial sample HTML snippet

knockoutAdvancedGist.html

<!-- snippet of loading indicator -->

<div data-bind="if: loading().length">
    <div class="alert alert-info">
        Loading... 
    </div>
</div>

<!---- snippet of binding countries and languages dropdowns to Knockout.js model. -->

<!-- set the context of working with the user part of the data-model -->
<form class="well form form-horizontal" data-bind="with: user">

        <div class="control-group">
            <label class="control-label" for="country">Country of Residence:</label>
            <div class="controls">
                <select name="country" id="country" multiple
                        data-bind="options: $parent.availableCountries(),
                                   optionsText: 'title', optionsValue: 'isoCode',
                                   value: country,
                                   optionsCaption: 'Choose...'"
                        ></select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="languages">Languages:</label>
            <div class="controls">
                <select name="languages" id="languages" multiple
                        data-bind="options: $parent.availableLanguages(),
                                   optionsText: 'name', optionsValue: 'isoCode',
                                   selectedOptions: languages,
                                   optionsCaption: 'Choose...'"
                        ></select>
            </div>
        </div>

</form>

<!---- snippet of javascript files to include. -->

    <script src="/js/knockout.js"></script>
    <script src="/js/knockout.mapping.js"></script>
    <script src="/js/underscore-min.js"></script>
    <script src="/js/jquery-1.7.2.min.js"></script>

    <script src="/js/ourUserModel.js"></script>
</body>
</html>