CODEWITHSUNDEEP
javascriptknockout.js
Justin Nafe
Justin Nafe

Reputation: 3062

knockout multi view using templates

I have a list of products where the name is a link to the product's details view. The list of products is the "Results" view

Samsumg
iPhone

When the user clicks on a product, the "Details" template is shown, and the "Results" template is not shown; at least that is the behavior that I want.

I am using the following code to accomplish this behavior, and have the jsFiddle here http://jsfiddle.net/justinnafe/mLf5G/:

<div data-bind="template: displayMode"></div>

<script type="text/html" id="Result">
<ul data-bind="foreach: products">
    <li><a href="#" data-bind="text: name, click: $parent.switchDisplayMode"></a></li>
</ul>
</script>

<script type="text/html" id="Details">
    <p data-bind="text: name"></p>
    <p data-bind="text: description"></p>
</script>

and the javascript:

var view = {
                name: "Result"
            };

var initialProducts = [{
    name: "Samsumg",
    description: "The best phone"
},{
    name: "iPhone",
    description: "The other best phone"
}];

var viewModel = (function (){
    var products = ko.observableArray(initialProducts),
        displayMode = ko.observable(view),
        switchDisplayMode = function(item){
            if (displayMode() == 'Result') {
                displayMode({ name: "Details", data: item });                
            }
            else {
                displayMode({ name: "Result", data: item });
            }
        };

    return {
        products: products,
        displayMode: displayMode,
        switchDisplayMode: switchDisplayMode
    };
})();

ko.applyBindings(viewModel);

I am trying to pass that product to the Details template, but have been unsuccessful. Any clues or tips would be helpful.

I am currently getting a "ReferenceError: products is not defined" error when I click on a link, but not sure how to fix it. Maybe if I fix that error, the switching views will behave as expected.

Upvotes: 0

Views: 74

Answers (1)

rwisch45
rwisch45

Reputation: 3702

In your function to switch the template, you are forgetting that your displayMode observable is holding an object - not a string value.

So inside switchDisplayMode, displayMode() = { name: 'Result' }. Switching that to displayMode().name fixes the problem. See updated fiddle

Upvotes: 1

Related Questions