Question

好吧，所以我广泛使用了KO样式绑定来显示用户输入数据的内联验证，并且效果很好。这是我的一个绑定：

data-bind='style: {backgroundPosition: ! currentRegistry().title() || !$root.currentRegistry().clientLogin()  ? "top" : "bottom"}

我遇到的麻烦是我想做这样的绑定，除了在第二个样式绑定上，如果if语句的计算结果为false，我希望它返回到由设置的任何背景位置以前的绑定，而不仅仅是回到“底部”：

data-bind='style: {backgroundPosition: ! currentRegistry().title() || !$root.currentRegistry().clientLogin()  ? "top" : "bottom"}, style: {backgroundPosition: currentRegistry().title() && $root.currentRegistry().clientLogin() && ! $root.hasRegImage()  ? "20px" : "bottom"}'

换句话说，对于第二个绑定，我想说风格：{backgroundPosition：if stuff？ “这个”}否则不会改变风格。希望这是有道理的，任何提示或指示，以实现这一点将不胜感激！感谢。

编辑：

虽然RodneyTrotter的解决方案无疑是获得同样功能的更优雅方式，但我确实从同事那里学到了一种完全符合我要求的方法。我没有意识到你可以让每个属性都有条件，也就是：

data-bind='style: {backgroundPosition: ! $root.currentRegistry().clientLogin() || ! $root.currentRegistry().title()  ? "top" :  (! $root.hasRegImage()  ? "20px" : "bottom")}'>

Answer 1

我会使用css绑定来实现这一点（注意：您可能需要使用css类的顺序来实现所需的结果）

HTML

<div id='myElement'
    data-bind='css: {
        'foo': !currentRegistry().title() || !$root.currentRegistry().clientLogin(), 
        'bar': currentRegistry().title() && $root.currentRegistry().clientLogin() && ! $root.hasRegImage()
    }'>
    Hello, i am the div content.
</div>

CSS

#myElement{
    background-position: bottom;
}

#myElement.foo {
    background-position:top;
}

#myElement.bar {
    background-position:20px;
}

Answer 2

即使您已经接受了答案，我也希望添加一个补充。当您继续使用Knockout时，我认为“关注点分离”是一个重要的概念。

通常认为最佳做法是将逻辑保留在视图模型中，将样式保存在CSS中，并将它们都保存在绑定/ html之外。有几个好处，但主要是它使更清晰，更易于维护的代码。罗德尼的回答让你朝着正确的方向迈出了一大步。

就原始帖子而言，您需要向视图模型添加函数，以便从绑定中获取逻辑。例如，

var viewModel = {
    backgroundStyle : function($root){
        return !$root.currentRegistry().clientLogin() || 
            !$root.currentRegistry().title()  ? 
            "top" :  
                (! $root.hasRegImage()  ? "20px" : "bottom");
    }
}

然后您的绑定将简写为：

<div data-bind="style : {backgroundPosition : backgroundStyle($root)}"></div>

再多一步

当然，我们已经将逻辑移出绑定，但现在我们已经在逻辑中得到了风格。再一次分离了罗德尼的回答，我们有......

#myElement{
    background-position: bottom;
}

#myElement.foo {
    background-position:top;
}

#myElement.bar {
    background-position:20px;
}

使用

的视图模型

var viewModel = {
    decideClassName : function($root){
        return !$root.currentRegistry().clientLogin() || 
            !$root.currentRegistry().title()  ? 
            "foo" :  (! $root.hasRegImage()  ? "bar" : "");
    }
}

我们的绑定变为

<div data-bind="css : decideClassName($root)}"></div>

我还应该指出，这种类型的动态CSS类名绑定仅在Knockout 2.2.0或更高版本as per Steven Sanderson's blog中可用。

以这种方式保持代码的有序性和“关注点分离”可以帮助您轻松找到错误，进行更改，与团队合作，最重要的是可以帮助您做出良好的实施决策。我最近helped someone on the Google group如果他们在他们的视图模型中有他们的逻辑而不是他们的绑定，他们很容易找到他们的答案。

我希望这些信息有用！

Answer 3

不是100％确定这是完全回答你的问题，但这也是有效且非常有用的：

'style': someCondition ? {'max-height': '100px'} : {}

如果不满足条件，允许您单独留下样式。

此外，如果您正在使用组件，则可以致电

'style': $component.getStyling($data)

然后在getStyling内执行一些多行if-statment逻辑来构造持有样式的对象。

同样适用于css绑定。

Knockout风格绑定有三个选项

3 个答案:

再多一步