chap1->The view-model->The view

chap2
jason.zhu 2021-05-27 02:03:06 +00:00
parent 00e4f10418
commit 4e774c2585
2 changed files with 31 additions and 0 deletions

View File

@ -6,8 +6,30 @@
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head> </head>
<body> <body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!-- our app goes here -->
<h1>Product</h1>
<div>
<strong>ID:</strong>
<span data-bind="text:product.id"></span><br />
<strong>Name:</strong>
<span data-bind="text:product.name"></span><br />
<strong>Price:</strong>
<span data-bind="text:product.price"></span><br />
<strong>Stock:</strong>
<span data-bind="text:product.stock"></span>
</div>
</div>
</div>
</div>
<!-- vendor library -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/knockout-3.2.0.js"></script> <script type="text/javascript" src="js/knockout-3.2.0.js"></script>
<!-- app -->
<script type="text/javascript" src="js/viewmodel.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,9 @@
var vm = {
product: {
id: 1,
name: 'T-Shirt',
price: 10,
stock: 20
}
};
ko.applyBindings(vm);