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个div和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());

});

用于动态绑定的敲除js中的css样式

1 个答案: