I am new bie on knockout js.i create a crud operation one page app in which you click on add field a form appear you add the data and click on add button it add the data and if you click on save button it show the data in json format but when i am clicking on my save button i just want to save the data which is in form at that time not the whole data.i am able to do this functionality on click of delete but dont know how to perform on click of save here is whole structure
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="knockout-3.1.0.js"></script>
</head>
<body>
<table style="width:100%;" data-bind="visible:showFields">
<tbody>
<tr>
<th style="width:100px;">Branch </th>
<th style="width:100px;">Enter Value</th>
</tr>
</tbody>
<tr>
<td>Branch ID (int):</td>
<td>
<input data-bind="value: BranchId" />
</td> <!--,valueUpdate:'keypress'-->
</tr>
<tr>
<td>Name :</td>
<td>
<input data-bind="value: Name" /></td>
</tr>
<tr>
<td>Description :</td>
<td>
<input data-bind="value: Description" /></td>
</tr>
<tr>
<td>Template :</td>
<td>
<select data-bind="options: Templates, value:
Template, optionsCaption: 'Select Template...'"></select></td>
</tr>
<tr>
<td>MetaKeyword :</td>
<td>
<input data-bind="value: MetaKeyword" /></td>
</tr>
<tr>
<td>MetaDescription :</td>
<td>
<input data-bind="value: MetaDescription" /></td>
</tr>
<tr>
<td>MetaTitle :</td>
<td>
<input data-bind="value: MetaTitle" /></td>
</tr>
<tr>
<td>EnableSearch :</td>
<td>
<select data-bind="options: EnableSearchs, value:
EnableSearch, optionsCaption: 'Select Search...'"></select>
</td>
</tr>
<tr>
<td colspan="3">
<button type="button" data-bind="click:
AddBranch">Add Branch</button>
<button type="button" data-bind="click:
SaveBranch">Save Branch</button>
</td>
</tr>
</table>
</div>
<div style="width:70%;float:left;display:inline-block;" data-bind="visible:show">
<h2>List of Branches</h2>
<table style="width:100%;" data-bind="visible: Branches().length > 0" border="0">
<tr>
<th>Branch Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Template</th>
<th>MetaKeyword</th>
<th>MetaDescription</th>
<th>MetaTitle</th>
<th>EnableSearch</th>
</tr>
<tbody data-bind="foreach: Branches">
<tr>
<td><span data-bind="text: BranchId" /></td>
<td>
<span data-bind="text: Name" /></td>
<td>
<span data-bind="text: Description" /></td>
<td>
<select data-bind="options: $root.Templates,
value: Template"></select></td>
<td>
<span data-bind="text: MetaKeyword" /></td>
<td>
<span data-bind="text: MetaDescription" /></td>
<td>
<span data-bind="text: MetaTitle" />
</td>
<td>
<select data-bind="options: $root.EnableSearchs,
value: EnableSearch"></select>
</td>
<td><a href="#" data-bind="click: $root.
DeleteBranch">Delete</a></td>
<td><a href="#" data-bind="click:$root.edit">edit</a></td>
</tr>
</tbody>
</table>
<a href="#" data-bind="click:AddField">AddFields</a>
</div>
</body>
<script>
function Branch(data) {
this.BranchId = ko.observable(data.BranchId);
this.Name = ko.observable(data.Name);
this.Description = ko.observable(data.Description);
this.Template = ko.observable(data.Template);
this.MetaKeyword = ko.observable(data.MetaKeyword);
this.MetaDescription = ko.observable(data.MetaDescription);
this.MetaTitle = ko.observable(data.MetaTitle);
this.EnableSearch = ko.observable(data.EnableSearch);
}
function BranchViewModel() {
var self = this;
self.EnableSearchs = ko.observableArray(['Yes', 'No']);
self.Templates = ko.observableArray(['Template1', 'Template2']);
self.Branches = ko.observableArray([]);
self.BranchId = ko.observable();
self.Name = ko.observable();
self.Description = ko.observable();
self.MetaKeyword = ko.observable();
self.MetaDescription = ko.observable();
self.MetaTitle = ko.observable();
self.EnableSearch = ko.observable();
self.Template = ko.observable();
self.editBranch = ko.observable();
self.show = ko.observable(true);
self.showFields = ko.observable(false);
self.flag = ko.observable(false);
self.AddBranch = function () {
if (self.flag()) {
self.editBranch().BranchId(self.BranchId())
self.editBranch().Name(self.Name())
self.editBranch().Description(self.Description())
self.editBranch().EnableSearch(self.EnableSearch())
self.editBranch().MetaKeyword(self.MetaKeyword())
self.editBranch().MetaDescription(self.MetaDescription())
self.editBranch().MetaTitle(self.MetaTitle())
self.editBranch().Template(self.Template())
self.flag(false);
self.show(true);
self.showFields(false);
self.BranchId(""),
self.Name(""),
self.Description(""),
self.EnableSearch(""),
self.MetaKeyword(""),
self.MetaDescription(""),
self.MetaTitle(""),
self.Template("")
}
else{
self.Branches.push(new Branch({
BranchId: self.BranchId(),
Name: self.Name(),
Description: self.Description(),
EnableSearch: self.EnableSearch(),
MetaKeyword: self.MetaKeyword(),
MetaDescription: self.MetaDescription(),
MetaTitle: self.MetaTitle(),
Template: self.Template()
}));
self.BranchId(""),
self.Name(""),
self.Description(""),
self.EnableSearch(""),
self.MetaKeyword(""),
self.MetaDescription(""),
self.MetaTitle(""),
self.Template("")
self.show(true);
self.showFields(false);
}
};
self.AddField = function(){
self.show(false);
self.showFields(true);
}
self.DeleteBranch = function (branch) {
alert(ko.toJSON({ data: branch }));
};
self.edit = function (branch) {
self.editBranch(branch);
self.show(false);
self.showFields(true);
self.BranchId(branch.BranchId());
self.Name(branch.Name());
self.Description(branch.Description());
self.EnableSearch(branch.EnableSearch());
self.MetaKeyword(branch.MetaKeyword());
self.MetaDescription(branch.MetaDescription());
self.MetaTitle(branch.MetaTitle());
self.Template(branch.Template());
self.flag(true);
}
self.SaveBranch = function (branch) {
alert(ko.toJSON( self.Branches));
};
}
$(document).ready(function () {
ko.applyBindings(new BranchViewModel());
});
</script>
</html>
secondly i want to display some json data on my page as my page get load. here is my json data.
[{"BranchId":"1","Name":"us","Description":"united states","Template":"Template1","MetaKeyword":"us","MetaDescription":"us","MetaTitle":"us","EnableSearch":"Yes"},{"BranchId":"2","Name":"europe","Description":"europe","Template":"Template1","MetaKeyword":"euro","MetaDescription":"euro","MetaTitle":"euro","EnableSearch":"Yes"},{"BranchId":"3","Name":"aus","Description":"aus","Template":"Template1","MetaKeyword":"aus","MetaDescription":"aus","MetaTitle":"aus","EnableSearch":"Yes"}]
Here's how you do it.. You need to convert each object from json to Branch. You can use computed for that.
Create new var for the JSON dataset
var dummyData = [{"BranchId":"1","Name":"us","Description":"united states","Template":"Template1","MetaKeyword":"us","MetaDescription":"us","MetaTitle":"us","EnableSearch":"Yes"},{"BranchId":"2","Name":"europe","Description":"europe","Template":"Template1","MetaKeyword":"euro","MetaDescription":"euro","MetaTitle":"euro","EnableSearch":"Yes"},{"BranchId":"3","Name":"aus","Description":"aus","Template":"Template1","MetaKeyword":"aus","MetaDescription":"aus","MetaTitle":"aus","EnableSearch":"Yes"}];
self.PopulateBranches = ko.computed(function(){
ko.utils.arrayForEach(dummyData, function(item){
self.Branches.push(new Branch(item));
});
});
Here's updated JSFiddle for you : http://jsfiddle.net/x2ubuy44/