淘汰赛 css 绑定和揭示模块 javascript patten答案

【问题标题】：knockout css binding and the revealing module javascript patten淘汰赛 css 绑定和揭示模块 javascript patten
【发布时间】：2013-01-30 07:46:59
【问题描述】：

我正在为我的 javascript 使用显示模块模式，并且我有最糟糕的时间让 css 绑定在淘汰赛中正常工作。

我的 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));

在我的cshtml中我有

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

现在我想通过敲除使用 css 绑定来根据 testOne 的值获取 css 值，它可以是三件事之一。我知道这将是一个 ko,computed 函数，但我无法弄清楚如何让每个特定的东西实例查看 testOne 并获得正确的值来确定通过 ko.computed 函数返回什么。

如果有人可以帮助我，我将不胜感激。

【问题讨论】：

标签： javascript asp.net-mvc asp.net-mvc-4 knockout.js

【解决方案1】：

这个小提琴展示了如何使用数组映射并通过敲除设置元素的类，它与您的代码不完全匹配，但应该有所帮助： 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>

也看看这个问题，看看设置类的两种方法：

Knockout binding css class to an observed model property

您可以使用 attr 或新的 css 绑定两者都在上面的问题中引用。

【讨论】：