Knockout JS:foreach

时间:2017-02-26 20:41:24

标签: knockout.js

我正在尝试以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'。事实上我尝试了其他几种方法..但是我没有错误,但没有添加样式类。

1 个答案:

答案 0 :(得分:3)

如果你有一个可观察的对象数组,并且每个对象定义了应该使用的css类,那么你可以简单地使用css绑定:

<div role="alert" data-bind="css: styleClass">

&#13;
&#13;
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;
&#13;
&#13;