淘汰賽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

回答

相關問題