Question

I have a JSFiddle though I seem to be having an issue with it. Down in viewModel.showDetails I can’t seem to call getter functions to return model values. I don’t have this problem locally.

What I’m really trying to do and resolve, however, is to only render the table rows for the individual drug clicked on in the list at the top of the “result” panel. Right now, it’s rendering out all drugs, when I only want it to list the drug you click on.

I’ve included the data I’m dealing with that’s returned from the server. This is the data object at the top of the JavaScript panel.

I then add a “showModal” property to each record. It’s set to false. In theory, this is my flag to determine rendering of this model object within the table, i.e., we only want to show this individual model object, not all of them.

The visibility of the table is tied to “showDetails” which toggles the showModal property on the individual model object (the drug clicked from the list above). This is where I’m having the getter errors in the fiddle.

Anyone have any ideas how I can restrict my rendering within the table? This is a very reduced case of what I’ve got locally and I’m not sure why I can’t call obj.showModal() as outlined above to retrieve values, but hopefully this gives you an idea of what I’m doing.

Answer 1

Fixed: http://jsfiddle.net/JpJQE/7/ (NOTE: knockout.mapping.js may not load in this jsFiddle. For some reason my computer refuses to connect to raw.github.com. You can replace the managed resource with a working link)

You are on the right track but are over-complicating it a little bit. You do not need to add a new property to every single item in your array. You just need to keep track of what item it is that you want to show. Ex:

var viewModel = ko.mapping.fromJS(data);
viewModel.visibleDrug = ko.observable();
viewModel.showDetails = function(drug)
{
    viewModel.visibleDrug(drug.pdlId);
}

ko.applyBindings(viewModel);

Also, if you use a visible in the same binding as your foreach, then your visible binding will be scoped at the parent level and not the item level. So, this will either show or hide ALL drugs. To differentiate between items of your array, you will need to place your visible binding within the foreach loop. Ex:

    <tbody data-bind="foreach: preferredDrugs"> 
        <!-- ko if: $root.visibleDrug() == pdlId -->
            ... repeating content ...
        <!-- /ko -->
    </tbody>

​