2012年8月25日 星期六

knockoutjs 16 foreach binding

knockoutjs foreach binding
Example1:

<!DOCTYPE html>
<html>
<head>
<title>foreach binding example</title>
<meta charset="UTF-8"/>
<style type="text/css">
table, td, th{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
td{
color:#DD8822;
/**上右下左*/
padding: 6px 8px 6px 8px;
}
</style>
<script src="../lib/knockout-2.1.0.js"></script>
</head>
<body>
<table>
    <thead>
        <tr><th>書名</th><th>售價</th></tr>
    </thead>
    <tbody data-bind="foreach: dataProvider">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: price"></td>
        </tr>
    </tbody>
</table>
<script>
(function(window, undefined){   
var ko = window.ko,
    viewModel={       
        dataProvider:[                                            
            { name: '驚缸郎前傳', price: 399 },
            { name: '雷神反核電', price: 299 },
            { name: '缸帖人怕觸電', price: 299 },  
            { name: '綠巨人好客的煩惱', price: 399 },
            { name: '台灣隊長的內心世界', price: 299 },
            { name: '黑寡婦：我只是不小心把蜘蛛人吃了', price: 299 }
        ]   
    };
//設定viewModel與DOM bind
ko.applyBindings(viewModel);
})(window);    
</script>
</body>
</html>

輸出結果：
書名售價
驚缸郎前傳 399
雷神反核電 299
缸帖人怕觸電 299
綠巨人好客的煩惱 399
台灣隊長的內心世界 299
黑寡婦：我只是不小心把蜘蛛人吃了 299

Example 2.
<!DOCTYPE html>
<html>
<head>
<title>foreach binding example</title>
<meta charset="UTF-8"/>
<style type="text/css">
</style>
<script src="../lib/knockout-2.1.0.js"></script>
</head>
<body>
<h4>明星</h4>
<!--foreach binding-->
<ul data-bind="foreach: dataProvider">
    <!--該區塊將會依資料長度重複產生-->
    <li>
        陣列中位置  <span data-bind= " text: $index"> </span>:
        <span data-bind="text: name"> </span>
        <a href="#" data-bind="click: $parent.removePerson">Remove</a>
    </li>
</ul>
<!--click binding-->
<button data-bind="click: addPerson">Add</button>
<script>
(function(window, undefined){
    function AppViewModel(){
        var self = this;
        self.dataProvider = ko.observableArray(null);
        
        //加一個項目 (add item)
        self.addPerson = function() {
            self.dataProvider.push({ name: "New at " + new Date() });
        };
     
        //移除一個項目  (remove item)
        self.removePerson = function() {
            self.dataProvider.remove(this);
        }
    }
    var viewModel = new AppViewModel(); 
    //bind viewModel   
    ko.applyBindings(viewModel);    
    //假裝是remote取回的遠端資料
    var result=[
            { name: '卡　卡' },
            { name: '艾薇兒' },
            { name: '丹尼爾' }
        ];
    //將值設定給viewMode裡的dataProvider屬性，屬性變動對應bind的UI將會自動改變內容。
    viewModel.dataProvider(result);    
})(window);   
</script>
</body>
</html>


Example 3:
<!DOCTYPE html>
<html>
<head>
<title>foreach binding example</title>
<meta charset="UTF-8"/>
<script src="../lib/knockout-2.1.0.js"></script>
</head>
<body>
<ul data-bind="foreach: myData">
    <li>
        <span>當前項目：  </span><b data-bind="text: $data"></b>
    </li>
</ul>
<script>
var myViewModel = 
{
    myData: [ '一月', '二月', '三月', '四月' ]
};

 ko.applyBindings(myViewModel); 
</script>
</body>
</html>


Example4: (具有afterRender的foreach，在元素產生後所要對DOM元素所做的宣染動作)


<!DOCTYPE html>
<html>
<head>
<title>foreach binding example</title>
<meta charset="UTF-8"/>
<style type="text/css">
</style>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
$(document).ready(function(){
var viewModel={
        myItems: ko.observableArray([ 'A', 'B', 'C' ]),
handleAfterRender: function(elements, data) {   
         $(elements).css({ color: 'red' });
}
};     
     ko.applyBindings(viewModel);
});  
</script>
</head>
<body>
<ul data-bind="foreach: { data: myItems, afterRender: handleAfterRender }">
    <li data-bind="text: $data"></li>
    <span>你</span>
    <div>好</div>    
</ul>
</body>
</html>

於

沒有留言:

張貼留言