First

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

by zdam

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>
   <input type="radio" name="choices" value="summary" data-bind="checked: selectedView" />Summary
    <input type="radio" name="choices" value="details" data-bind="checked: selectedView" />Details
    <div data-bind="template: { name: templateToUse, foreach: articles }"></div>

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.selectedArticle = ko.observable();
    viewModel.templateToUse = function(item) {
        return item === this.selectedArticle() ? 'edit' : this.selectedView();
    }.bind(viewModel);

ko.applyBindings(viewModel);