我正在尝试以bootstraps'警报'的方式创建一个淡化(WebSocket-)消息列表:成功,信息,错误......
<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'。事实上我尝试了其他几种方法..但是我没有错误,但没有添加样式类。
答案 0 :(得分:3)
如果你有一个可观察的对象数组,并且每个对象定义了应该使用的css类,那么你可以简单地使用css绑定:
<div role="alert" data-bind="css: styleClass">
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());
&#13;
<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>
&#13;