Can you apply visible binding based on the data currently being bound?

Question

I'm trying to set some content in a template to be visible only if the item being rendered is the "current item".

Here is the code so far, I want to be able to only render a part of the inner template if the data item being rendered has ID == window.viewModel.activeObject.

<section data-bind='template: { name: "categoryTemplate", foreach: categories }'></section>

<script type="text/html" id="categoryTemplate">
    <section>
        <h2>${Name}</h2>
        <section data-bind='template: { name: "objectTemplate", foreach: Objects }'></section>
    </section>
</script>
<script type="text/html" id="objectTemplate">
    <article>
        <h3>${Name}</h3>

      (only render this if the object rendered has ID equal to viewModel.activeObject)
        {{html Text}}

    </article>
</script>
<script>
    $(document).ready(function(){
        window.viewModel = { categories : <asp:Literal runat="server" ID="LiteralJSON" />,
            activeCategory: ko.observable(0),
            activeObject: ko.observable(0)
        };

        ko.applyBindings(window.viewModel);
    });
</script>

How would I go about doing that?

Answer 1

You'll want to use {if}{/if}

<script type="text/html" id="objectTemplate">
    <article>
        <h3>${Name}</h3>
        {if $item.data.id === viewModel.activeObject()}
        {{html Text}}
        {/if}
    </article>
</script>