CSS стиль в нокауте JS для динамического связывания

Question

Вот мой код:

<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 див и 6 якорей соответственно. Я попробовал float:left, display:block и другие типы стилей, но я не уверен, как отображать шесть блоков непрерывно, причем каждый блок содержит div и якорь.

Answer 1

Вы хотите итерировать данные, а затем ссылаться на каждую итерацию в шаблоне как $ 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> 

и ViewModel ...

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()); 

});