Let's bind the <div> tag enclosing the controls using with. The advantage of with-binding is, we can nest one or more sets of control inside another. In the sample code. the <div> is bound using with. There is only one view model in the view. In the view model the two sets of the controls are segregated based on with-binding.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <div style="width: 600px; overflow: hidden;"> <div style="width: 300px; float: left;" data-bind="with: Book"> Book Title: <input data-bind="value: bookTitle" /><br /> Book Price: <input data-bind="value: bookPrice" /><br /> <button data-bind="click: btnSubmit">Submit</button> </div> <div style="display: table-cell;" data-bind="with: Author"> Author Name: <input data-bind="value: authorName" /><br /> Book Title: <input data-bind="value: bookTitle" /><br /> <button data-bind="click: btnSubmit">Submit</button> </div></div><script src="./knockout-2.2.0.js"></script><script type="text/javascript"> var viewModel = { Book: { bookTitle: ko.observable("ASP.NET For Everyone"), bookPrice: ko.observable("$34.00"), btnSubmit: function () { alert(this.bookTitle() + ": " + this.bookPrice()); } }, Author: { authorName: ko.observable("Dr. Someone"), bookTitle: ko.observable("ASP.NET For Everyone"), btnSubmit: function () { alert(this.authorName() + ": " + this.bookTitle()); } } }; ko.applyBindings(viewModel);</script> |