Dynamically specifying the name of a template

by gurkavcu

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<input type="radio" name="choices" value="summary" data-bind="checked: selectedView" />Summary
<input type="radio" name="choices" value="details" data-bind="checked: selectedView" />Details
<hr/>

<div data-bind="template: { name: templateToUse, foreach: articles }"></div>

<script id="summary" type="text/html">
    <div data-bind="text: title"></div>    
</script>

<script id="details" type="text/html">
    <div>
        <h2 data-bind="text: title"></h2>
        <p data-bind="text: content"></p>
        <button data-bind="click: function() { viewModel.selectedArticle($data); }">Edit</button>
    </div>
</script>

<script id="edit" type="text/html">
    <div>
        <input data-bind="value: title" /><br/>
        <input data-bind="value: content" />
    </div>
</script>

CSS

h2 { font-weight: bold; }
p { font-size: .8em; }
div { padding-bottom: 20px; }

JavaScript

var viewModel = {
    articles: [{
        id: 1,
        title: "Article One",
        content: "Content for article one."},
    {
        id: 2,
        title: "Article Two",
        content: "Content for article two."},
    {
        id: 3,
        title: "Article Three",
        content: "Content for article three."}
                                               ],
    selectedView: ko.observable("summary"),
    selectedArticle: ko.observable()
};

viewModel.templateToUse = function(item) {
    return item === this.selectedArticle() ? 'edit' : this.selectedView();
}.bind(viewModel);

ko.applyBindings(viewModel);