用Knockout顯示條件html

我有一個可觀察的活動數組，包含審計和評論。我從服務器獲取數據，並根據對象的時間戳對活動數組進行排序。用Knockout顯示條件html

我希望能夠根據類型有條件地顯示html，因此審覈和評論看起來會有所不同。

<!-- ko foreach: activities --> 
<div class="audit" data-bind="visible: {activity is typeof Audit}"> 
    @*Do some audit html*@ 
</div> 
<div class="comment" data-bind="visible: {activity is typeof Comment}"> 
    @*Do some comment html*@ 
</div> 
<!-- /ko -->

我有以下的HTML，但我不知道該怎麼辦的情況，我只是寫在上面的東西作爲一個佔位符，所以你得到的是什麼，我想實現的想法。

我可能接近這一切錯誤，任何幫助非常感謝！

來源

2012-06-13 Neil

我想'數據綁定=「可見：{activity.hasOwnProperty（<一些獨特的審計PPOPERTY名在此>）}」'會的工作，但請你提供一個JS搗鼓測試？ –

我以前從來沒有用過js小提琴，但我會嘗試去做一個，然後添加爲編輯。 – Neil

如果更改可見結合的，如果結合Nayjest的解決方案應該工作 - 這樣它就不會嘗試渲染具有標題依賴性的部分。

但是，一個更好的解決方案可能有兩個模板並根據類型執行它們。您可以在虛擬機上使用$ data並返回一個方法，例如，'auditTemplate'或'commentTemplate'，具體取決於$ data instanceof Audit之類的結果。然後，您將有嵌入的腳本標記與IDS兩個模板：

<script id="auditTemplate" type="text/html"> 
<div class="audit"> 
<!-- Do some audit stuff --> 
</div> 
</script> 

<script id="commentTemplate" type="text/html"> 
<div class="comment"> 
<!-- Do some comment stuff --> 
</div> 
</script>

然後在你的虛擬機，你必須是這樣的：

this.getTemplate = function(data) { 
return (data instanceof Audit) ? 'auditTemplate' : 'commentTemplate' 
}

在您網頁的HTML，你會做一些事情像：

<!-- ko foreach: activities --> 
<div databind="template: {name:$parent.getTemplate($data), data: $data}"></div> 
<!-- /ko -->

來源

2012-06-14 14:42:27 daedalus28

如果你有一流的審計是在全球範圍內和視圖模型的特性「活動」可見，嘗試這樣的事情：

<div data-bind="foreach: activities"> 
    <div data-bind="visible: $data instanceof Audit"> 
     <h1 data-bind="text: $data.title"></h1> 
     <!-- Some other data here --> 
    </div> 
</div>

來源

2012-06-13 15:43:46 Nayjest

嗨，這很好，但不幸的是它仍然解析內部元素。所以如果它是一個評論，它仍然會嘗試運行$ data.title，但因爲註釋沒有title屬性而落空。我被指導使用模板。 – Neil

也許可以考慮使用if-binding而不是可見綁定：http://knockoutjs.com/documentation/if-binding.html - 這樣，內部綁定纔會被應用，直到條件爲真。 – Niko

用Knockout顯示條件html

回答

相關問題