用template的方式來顯示資料，
knockout.js有幾種的作法，
看看可怎麼使用。
使用命名的樣板
用 id 來指定 template 的名稱，
也要在 template 的區塊裡，
加上 type="text/html" 免得被當作javascript執行，
此例是用了兩次的 person-template 的樣板。

<h2>參賽者</h2>
兩名參賽者：
<div data-bind="template: { name: 'person-template', data: one }"></div>
<div data-bind="template: { name: 'person-template', data: two }"></div>

<script type="text/html" id="person-template">
    <h3 data-bind="text: username"></h3>
    <p>主題：<span data-bind="text: subject"></span></p>
</script>

<script src="/js/knockout.js" type="text/javascript"></script>
<script src="/data.js" type="text/javascript"></script>
<script type="text/javascript">
  var viewModel = function(){
    var self = this;
    self.one = i5data[0];
    self.two = i5data[1];
  };

  ko.applyBindings(new viewModel());
</script>

http://i5.tagbible.net/temp1.html

用foreach使用命名的樣板
用迴圈的方式透過樣板顯示內容，
只要把上述的3,4兩行用這一行取代即可：

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

http://i5.tagbible.net/temp2.html

用as來做foreach裡元素的別名
這較適合用在較多階層的資料型態。

    <meta charset="UTF-8" />
    <title>鐵人五</title>
<script src="/js/knockout.js" type="text/javascript"></script>


<ul data-bind="template: { name: 'seasonTemplate', foreach: seasons, as: 'season' }"></ul>

<script type="text/html" id="seasonTemplate">
    <li>
        <strong data-bind="text: name"></strong>
        <ul data-bind="template: { name: 'monthTemplate', foreach: months, as: 'month' }"></ul>
    </li>
</script>

<script type="text/html" id="monthTemplate">
    <li>
        <span data-bind="text: month"></span>
        is in
        <span data-bind="text: season.name"></span>
    </li>
</script>

<script>
    var viewModel = function() {
        self.title = 'hi';
        self.seasons = ko.observableArray([
            { name: 'Spring', months: [ 'March', 'April', 'May' ] },
            { name: 'Summer', months: [ 'June', 'July', 'August' ] },
            { name: 'Autumn', months: [ 'September', 'October', 'November' ] },
            { name: 'Winter', months: [ 'December', 'January', 'February' ] }
        ])
    };
    ko.applyBindings(new viewModel());
</script>

這 as 的功能要在 knockout-2.2.0.js 才有效，
如果是之前的版本，19,21行
要改成這樣才能運作：

<span data-bind="text: $data"></span>
<span data-bind="text: $parent.name"></span>

http://i5.tagbible.net/b3.html

系列文章列表