淘汰赛JS：CSS中的foreach

我想创建褪色的列表（WebSocket-）在白手起家“警报”风格消息绑定：成功，信息，错误...淘汰赛JS：CSS中的foreach

<div data-bind="foreach: messages"> 
    <div class="message" data-dind="css: $parent.foo($data)"> 
    </div> 
</div>

每个消息应该得到它的风格类动态相对于它的属性'styleClass'。

var viewModel = { 
    messages: ko.observableArray(), 

    foo: function(data) { 
     return data.styleClass; // could be e.g. 'alert' 
    } 
    }; 


    ko.applyBindings(viewModel);

这种尝试的正确做法是什么？它是使用'pureComputeds'。事实上，我尝试了其他几种方法..但是，我没有得到任何错误，但没有添加样式类。

来源

2017-02-26 L. Heider

你能尝试编辑问题并将其扩展到[mcve]？虽然不一定是惯用的，但你的解决方案可以在理论上起作用，但不可能仅仅告诉你发布什么...... – Jeroen

如果你有对象的可观察到的数组，每个对象定义了CSS类应该再使用，你可以简单地使用一个CSS结合：

var ViewModel = function() { 
 
    this.messages = ko.observableArray([ 
 
     { styleClass: "alert alert-success", message: "This is a success message" }, 
 
     { styleClass: "alert alert-warning", message: "This is a warning message" }, 
 
     { styleClass: "alert alert-danger", message: "This is an error message" } 
 
    ]); 
 
    }; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: messages"> 
 
    <div role="alert" data-bind="css: styleClass"> 
 
    <span data-bind="text: message">   
 
    </div>  
 
</div>

来源

2017-02-26 21:29:40

这对我有用..非常感谢！ –

淘汰赛JS：CSS中的foreach

回答

相关问题