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 。

现在的问题是，当您单击按钮时，所有具有“单元格”类的表格单元格的背景颜色都应该改变。但是，如果隐藏的 div 不可见，那么当它可见时，它的背景颜色仍然是白色。这样做的原因似乎是因为我正在更改包装隐藏单元格的“with”绑定中使用的属性。似乎当您更改与“with”绑定的属性时，它会重置其子项的样式。

（如果这没有意义，请在 jsFiddle 上执行此操作。单击按钮，然后单击“单击以打开”单元格。注意“项目 2”未突出显示。再次单击该按钮，它将突出显示。现在再次点击“Click to open”单元格，注意“item 2”不再突出显示。现在删除显示函数中设置“someProperty”的行并重复实验。“item 1”现在无论是否正确突出显示单击颜色单元格按钮时是否可见）

这是设计使然吗？有没有办法解决它，以便更改“with”使用的属性不会重置样式？

4

2 回答 2

3

恕我直言，解决这个问题的正确方法是将颜色也作为可观察的，可以在单击按钮时更改。我在这里有更新 jsfiddle

于 2012-04-13T15:33:40.303 回答
0

与其改变 css 类，不如尝试改变单元的类而不是 css 类“单元”本身，看看是否有效？

于 2012-04-13T15:27:41.877 回答