<html>
<head>
<style>
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=’text/javascript’ src=’http://knockoutjs.com/downloads/knockout-3.0.0.js’></script>
</head>
<body>
<div class=’liveExample’>
<p>Data bind to text field</p>
<p>First Message: <strong data-bind=”text: msg1″></strong></p>
<p>Second Message: <strong data-bind=”text: msg2″></strong></p>
<hr>
<p>Data bind to input field</p>
<p>First Box: <input data-bind=”attr: {value: msg1}” /></p>
<p>Second Box: <input data-bind=’attr: {value: msg2}’ /></p>
</div>
<style>
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=’text/javascript’ src=’http://knockoutjs.com/downloads/knockout-3.0.0.js’></script>
</head>
<body>
<div class=’liveExample’>
<p>Data bind to text field</p>
<p>First Message: <strong data-bind=”text: msg1″></strong></p>
<p>Second Message: <strong data-bind=”text: msg2″></strong></p>
<hr>
<p>Data bind to input field</p>
<p>First Box: <input data-bind=”attr: {value: msg1}” /></p>
<p>Second Box: <input data-bind=’attr: {value: msg2}’ /></p>
</div>
</body>
<script>
function AppViewModeldashboard() {
// Here’s my data model
this.msg1 = “hello”;
this.msg2 = “world”;
}
<script>
function AppViewModeldashboard() {
// Here’s my data model
this.msg1 = “hello”;
this.msg2 = “world”;
}
</script>
<script type=’text/javascript’ >
$(document).ready(function(){
var dashboard = new AppViewModeldashboard();
ko.applyBindings(dashboard);
});
</script>
</html>
<script type=’text/javascript’ >
$(document).ready(function(){
var dashboard = new AppViewModeldashboard();
ko.applyBindings(dashboard);
});
</script>
</html>
No comments:
Post a Comment