Binding 具有三个选项的击出式绑定_Binding_Knockout.js_Styles

Binding 具有三个选项的击出式绑定

binding knockout.js

Binding 具有三个选项的击出式绑定,binding,knockout.js,styles,Binding,Knockout.js,Styles,好的，我已经广泛地使用了KO风格的绑定来显示用户输入数据的内联验证，它非常有效。以下是我的一个绑定： data-bind='style: {backgroundPosition: ! currentRegistry().title() || !$root.currentRegistry().clientLogin() ? "top" : "bottom"} 我遇到的问题是，我想做这样的绑定，除了在第二个样式绑定上，如果if语句的计算结果为false，我希望它返回到前一个绑定设置的任何背景位置

好的，我已经广泛地使用了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？THIS}else不改变样式。希望这是有意义的，任何提示或指针，使这发生将不胜感激！谢谢

编辑：

尽管RodneyTrotter的解决方案无疑是获得相同功能的更优雅的方式，但我确实从一位同事那里学到了一种方法，它完全符合我的要求。我不知道你可以让每个属性都有条件，也就是：

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

我将使用css绑定来实现这一点：您可能需要处理css类的顺序，以实现所需的结果

HTML

我将使用css绑定来实现这一点：您可能需要处理css类的顺序，以实现所需的结果

HTML

即使您已经接受了答案，我还是想添加一项内容。我认为关注点分离是一个重要的概念，在您继续使用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>

带视图模型

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

我们的约束就变成了

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

我还应该指出，这种类型的动态CSS类名绑定仅在淘汰版2.2.0或更高版本中可用

以这种方式保持代码的组织和关注点的分离可以帮助您轻松地发现bug、进行更改、与团队合作，而且最重要的是可能会引导您做出良好的实现决策。我最近提到，如果他们在视图模型中有自己的逻辑，而不是绑定，他们会很容易找到答案

我希望这些信息是有用的

即使您已经接受了答案，我还是想添加一个内容。我认为关注点分离是一个重要的概念，在您继续使用Knockout时要牢记这一点

就您最初的文章而言，您希望向视图模型添加函数，以便从绑定中提取逻辑。比如说,

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>

带视图模型

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

我们的约束就变成了

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

我还应该指出，这种类型的动态CSS类名绑定仅在淘汰版2.2.0或更高版本中可用

我希望这些信息是有用的

不能100%确定这是否准确回答了您的问题，但这也是有效的，而且非常有用：

“风格”：某种条件？{'max-height'：'100px'}:{}

允许您在不满足条件时不使用样式

此外，如果您使用的是组件，则可以调用

'style'：$component.getStyleing$data

然后在GetStyleing中执行一些多行if语句逻辑来构造保存样式的对象

css绑定也是如此。

不能100%确定这是否准确回答了您的问题，但这也是有效的，并且非常有用：