最近在学习kncoutjs,在这条路上慢慢的爬行,现在把自己的一点心得贴出来,让大家看看。
<script type="text/javascript" src="${path}/js/plugins/ko/knockout-3.1.0.js"></script>
<script type="text/javascript" src="${path}/js/plugins/ko/knockout.mapping.js"></script>
<script type="text/javascript" src="${path}/js/plugins/ko/jquery.tmpl.js"></script>
<script type="text/javascript">
var GiftModel =function(searchname, tempName) {
this.searchname = searchname;
this.tempName = tempName;
<pre code_snippet_id="348591" snippet_file_name="blog_20140516_1_4620557" class="html" name="code"><script type="text/javascript" src="${path}/js/plugins/jquery-1.8.3.js"></script>
}
function MyViewModel() {
this.buyer = { name: 'Franklin', credits: 250 };
this.seller = [
{ searchname: "Tall Hat", tempName: "39.95"},
{ searchname: "Long Cloak", tempName: "120.00"}
];
}
$(function(){
ko.applyBindings(new MyViewModel());
});
</script>
<body>
<h2>Participants</h2>
Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'search-template', foreach: seller }"></div>
<input type="submit" value="提交">
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/html" id="search-template">
<h3 data-bind="text: searchname"></h3>
<p><input data-bind="value: tempName" ></p>
</script>