"Latest" Base Fiddle

Latest copy of: -jQuery templates -KnockoutJS -KO Mapping plugin

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
<section class="categories">
                <ul class="categories-list" data-bind="foreach: categories">
                    <li class="urban"><a href="javascript:;"><span data-bind='text: name, event: { mouseover: function(data, event) { $root.updateDescription($data) }, mouseout: function(data, event) { $root.clearDescription() } }'></span></a></li>                    
                </ul>
                    <div class="descr">
                        <h3 id="idName" data-bind="text: name"></h3>
                        <p id="idDescription" data-bind="text: Description"></p>
                    </div>
</section>

JavaScript

var json = {"categories":[{"id":"1","name":"adventure","description":"abc"},
    {"id":"2","name":"urban","description":"def"},
    {"id":"3","name":"romantic","description":"ghi"}]};

var model = ko.mapping.fromJS(json);

model.updateDescription = function(val) {    
    $("#idName").text(val.name());
    $("#idDescription").text(val.description());
}

model.clearDescription = function() {
    $("#idName").text('');
    $("#idDescription").text('');
}

ko.applyBindings(model);