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样式的动态绑定

回答

相关问题