CSS樣式的動態綁定

這裏是我的代碼：CSS樣式的動態綁定

<div data-bind="template:{name:'person-template',foreach:$data[1],afterrender:sample}"> 

This will create the 6 divs and 6 anchors dynamically using template. 
<script type="text/html" id="person-template"> 
<div id="uniqueid"> 
</div> 
<a style="border-left-width:1px"> 
</a> 
</script>

我分別有一組6名的div和6個錨。我試過float:left, display:block和其他類型的樣式，但我不知道如何連續顯示六個塊，每個塊包含一個div和一個錨點。

來源

2016-04-14 user1400915

你可能想要把周圍的內容'div'您模板，並使用foreach綁定的div上的'display：flex'。 –

第二個以前的評論。 - 關於這個問題的一些反饋意見：如果你創建一個實際的[mcve]，你會得到更好的迴應。你的問題與KO無關，所以我建議刪除包括*渲染的*最終降價，包括你當前的CSS。另外：讓我們知道爲什麼標記「html5」和「css3」，因爲當前沒有任何特定於您的帖子的技術人員。最後，請準確說明預期結果：如果您希望事情佔用全部寬度，那麼flexbox或display：table是相關的，否則可能不那麼重要。 – Jeroen

您想遍歷數據，然後將模板中的每個迭代作爲$ data進行引用。

工作小提琴：http://jsfiddle.net/mtalley/2o3hfvfd/6/

的觀點...

<div data-bind="template: {name: 'person-template', foreach: data, afterrender: sample}"> 

<!-- This will create the 6 divs and 6 anchors dynamically using template. --> 
<script type="text/html" id="person-template"> 
    <div id="uniqueid" /> 
    <a style="border-left-width:1px" data-bind="attr: { href: $data.url }, text: $data.text" /> 
</script>

和視圖模型...

jQuery(function ($) { 
    var ViewModel = function() { 
    var self = this; 

    self.data = ko.observableArray([ 
     { 
     text: 'Google', 
     url: 'http://www.google.com' 
     }, 
     { 
     text: 'Yahoo', 
     url: 'http://www.yahoo.com' 
     }, 
     { 
     text: 'New York Times', 
     url: 'http://www.nytimes.com' 
     }, 
     { 
     text: 'Reddit', 
     url: 'http://www.reddit.com' 
     }, 
     { 
     text: 'JS Fiddle', 
     url: 'http://www.jsfiddle.net' 
     }, 
     { 
     text: 'Stackoverflow', 
     url: 'http://www.stackoverflow.com' 
     } 
    ]); 

    self.sample = function(){}; 
    } 

    ko.applyBindings(new ViewModel()); 

});

來源

2016-04-14 20:40:44

CSS樣式的動態綁定

回答

相關問題