0

私は自分の JavaScript に Reveal モジュール パターンを使用しており、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 値を取得したいと考えています。これは 3 つのいずれかになります。私はそれが ko,computed 関数になることを知っていますが、特定のインスタンスごとに testOne を見て、ko.computed 関数を介して何を返すかを決定するための正しい値を取得する方法を完全に理解することはできません。

誰かが私を助けてくれたら、とても感謝しています。

4

1 に答える 1

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>

また、この質問を見て、クラスを設定する2つの方法を確認してください。

css クラスを監視対象のモデル プロパティにバインドするノックアウト

上記の質問で参照されている attr または新しい css バインディングを使用できます。

于 2013-01-29T22:40:01.937 に答える