0

私はこのようなHTMLを持っています：

<div>
    <table>
        <tr onclick="show();">
            <td class="cell">Click to open</td>
        </tr>
    </table>
</div>
<div style="display:none; position:absolute; left:150px" id="hiddenDiv">
    <table data-bind="with: someProperty">
        <tr onclick="hide();">
            <td class="cell" data-bind="text:message"></td>
        </tr>
    </table>
</div>
<input type="button" value="Color cells" onclick="colorCells()" />

そして私のJavaScriptは次のようになります：

    function show() {
        vm.someProperty(vm.list[1]);
        $("#hiddenDiv").fadeIn("slow");
    }
    function hide() {
        $("#hiddenDiv").fadeOut("slow");
    }
    function colorCells() {
        $(".cell").css("background-color", "Yellow");
    }

    function ViewModel() {
        this.list = [new SubModel("item 1"), new SubModel("item 2")];
        this.someProperty = ko.observable(this.list[0]);
    }

    function SubModel(msg) {
        this.message = msg;
    }

    var vm = new ViewModel();

    $(function () {    
        ko.applyBindings(vm);
    });

ここにjsFiddleを設定しました。

ここで問題となるのは、ボタンをクリックすると、クラス「cell」を持つすべてのテーブルセルの背景色が変更されるはずです。ただし、非表示のdivが表示されていない場合、表示されたときの背景色は白のままです。これは、非表示のセルをラップする「with」バインディングで使用されるプロパティを変更しているためと思われます。「with」でバインドされたプロパティを変更すると、そのサブアイテムのスタイルがリセットされるようです。

（それが意味をなさない場合は、jsFiddleでこれを行います。ボタンをクリックしてから[クリックして開く]セルをクリックします。[アイテム2]が強調表示されていないことに注意してください。ボタンをもう一度クリックすると強調表示されます。今すぐ[クリックして開く]セルをもう一度クリックすると、「アイテム2」が強調表示されていないことに注意してください。次に、show関数で「someProperty」を設定している行を削除して、実験を繰り返します。「アイテム1」は、かどうかに関係なく正しく強調表示されます。カラーセルボタンをクリックしたときに表示されたかどうか）

これは仕様によるものですか？「with」で使用されるプロパティを変更してもスタイルがリセットされないように回避する方法はありますか？

4

2 に答える 2

3

この問題を解決する正しい方法であるIMHOは、色を観察可能なものとしても配置します。これは、ボタンをクリックするだけで変更できます。ここに更新jsfiddleがあります

于 2012-04-13T15:33:40.303 に答える
0

cssクラスを変更する代わりに、cssクラス'cell'自体ではなく、セルのクラスを変更してみてください。それが機能するかどうかを確認してください。

于 2012-04-13T15:27:41.877 に答える