改变“与".属性更改样式 [英] changing "with" property changes styles

问题描述

我的html看起来像这样:

I have html that looks something like this:

<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看起来像这样:

And my JavaScript looks like this:

    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.

I set up a jsFiddle here.

现在的问题是，当您单击按钮时，所有具有单元格"类的表单元格的背景色都应该更改.但是，如果隐藏的div不可见，则将其设为可见时，其背景颜色仍为白色.造成这种情况的原因似乎是因为我正在更改包装隐藏单元格的"with"绑定中使用的属性.似乎当您更改与"with"绑定的属性时，它会为其子项重置样式.

Now the problem is, when you click the button, all the table cells with class "cell" should have their background color changed. However, if the hidden div isn't visible, then when it is made visible, it's background color is still white. The reason for this seems to be because I'm changing the property that is used in a "with" binding that wraps the hidden cell. It seems when you change the property bound with "with", it resets the style for it's subitems.

(如果没有任何意义，请在jsFiddle上执行此操作.单击按钮，然后单击单击以打开"单元格.请注意，项目2"未突出显示.再次单击该按钮，它将现在再次单击单击以打开"单元格，注意"item 2"不再突出显示.现在删除在show函数中设置"someProperty"的行并重复实验."item 1"现在正确突出显示了无论您单击颜色单元"按钮时它是否可见)

(If that makes no sense, do this on the jsFiddle. Click the button, then click the "Click to open" cell. Notice that "item 2" isn't highlighted. Click the button again and it'll be highlighted. Now click the "Click to open" cell again, notice that "item 2" is no longer highlighted. Now remove the line that sets "someProperty" in the show function and repeat the experiment. "item 1" is now highlighted correctly regardless of whether or not it was visible when you click the color cells button)

这是设计使然吗?有没有一种解决方法，以便更改"with"使用的属性不会重置样式?

Is this by design? Is there a way to work around it so that changing a property used by "with" doesn't reset the style?

推荐答案

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

The correct way to solve this problem, IMHO, would be put the color also as an observable, which can be changed onclick of the button. I have the update jsfiddle here

这篇关于改变“与".属性更改样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！