Question

I am using the reveal module pattern for my javascript and I am having the darndest time getting the css binding to work correctly with knockout.

My JS

    my.js.module = (function ($) {
        "use strict";

        var my = { 
            testUrl: null 

        },
            testModel= {
                stuff: [{
                    "testOne": null
                }]
            },
            testViewModel = null,
            testId: null;

    my.bindStuff = function () {

        testViewModel =  ko.mapping.fromJS(testModel);

        ko.applyBindings(testViewModel, $(my.testId).get(0));

        $.getJSON(my.testUrl,
            {},
            function (data) {

                var testModelData = {
                    stuff: data
                };

                ko.mapping.fromJS(testModelData, testViewModel);
            });
    };

    return my;
}(jQuery));

and in my cshtml I have

<tbody data-bind="foreach: stuff">
                <tr>
                    <td data-bind="text: testOne"></td> 
                </tr>
            </tbody>

Now I want to use the css binding via knock out to get a css value based on the value of what testOne is, it can be one of three things. I know it will be a ko,computed function but i cant quite figure out how to get each particular instance of stuff to look at testOne and get the correct value to determine what to return via the ko.computed function.

if someone could help me out i would be greatly appreciative.

Answer 1

This fiddle shows how to use mapping with an array and set the class of an element via knockout, its not an exact match to your code but should help:
http://jsfiddle.net/davidoleary/UHaVV/

var newData = {    
    test:"this is a test",
    stuff:[
        {"testOne":"Event1"},
        {"testOne":"Event2"},
        {"testOne":"Event3"}
    ]
};

var viewModel = ko.mapping.fromJS( newData );
ko.applyBindings(viewModel);

<div data-bind="text:test"></div>
    <ul data-bind="foreach: stuff">
    <li><span data-bind="text: testOne, attr:{class: testOne}"></span></li>
</ul>

Also have a look at this question to see two ways of setting the class:

Knockout binding css class to an observed model property

You can use attr or the new css binding both are refereed to in the question above.