Knockoutjs and binding - asp.net-mvc

Question

I'm going crazy with knockuoutjs and binding:
I have defined a CreateEditGroup.js document and I have created methods and Collection to retrieve or update a Group in my application:
var url = window.location.pathname;
var GroupID = url.substring(url.lastIndexOf('/') + 1);
var Group = function (group)
{
var self = this;
self.GroupID = ko.observable(group ? group.GroupID : 0).extend({ required: true });
self.Name = ko.observable(group ? group.Name : '').extend({ required: true });
};
var GroupCollection = function () {
var self = this;
if (GroupID == 0) {
self.group = ko.observable(new Group());
}
else {
$.ajax({
url: '/Group/GetGroupByID/' + GroupID,
async: false,
dataType: 'json',
success: function (json) {
self.group = ko.observable(new Group(json));
}
});
}
self.backToGroupList = function () { window.location.href = '/App/Groups' };
//Aggiunta o modifica
self.saveGroup = function () {
$.ajax({
type: (self.group().GroupID > 0 ? 'PUT' : 'POST'),
cache: false,
dataType: 'json',
url: urlContact + (self.group().GroupID > 0 ? '/UpdateGroup?id=' + self.group().GroupID : '/SaveGroup'),
data: JSON.stringify(ko.toJS(self.group())),
contentType: 'application/json; charset=utf-8',
async: false,
success: function (data) {
window.location.href = '/App/Groups';
},
error: function (err) {
var err = JSON.parse(err.responseText);
var errors = "";
for (var key in err) {
if (err.hasOwnProperty(key)) {
errors += key.replace("group.", "") + " : " + err[key];
}
}
$("<div></div>").html(errors).dialog({ modal: true, title: JSON.parse(err.responseText).Message, buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
},
complete: function () {
}
});
};
};
ko.applyBindings(new GroupCollection());
And the view that shows the form have this HTML code:
#{
ViewBag.Title = "CreateEditGroup";
}
<h2>Nuovo gruppo</h2>
<table class="table">
<tr>
<th colspan="1">
</th>
</tr>
<tr></tr>
<tbody data-bind="with: Group">
<tr>
<td>
<input class="input-large" data-bind="value: Name" placeholder="Nome" />
</td>
</tr>
</tbody>
</table>
<button class="btn btn-small btn-success" data-bind="click: saveGroup">Salva</button>
<input class="btn btn-small btn-primary" type="button" value="Annulla" data-bind="click: $root.backToGroupList" />
<script src="#Url.Content("~/Repository/CreateEditGroup.js")"></script>
Everytime that I load the CreateEditGroup page I receive the message that is impossibile to bind Name attribute, but the code seems good.
Help me, please.
Code error:
An unhandled exception occurred at line 1936 column 17 in http://localhost:2297/Scripts/knockout-2.2.1.debug.js
0x800a139e - Run-time JavaScript: Unable to parse bindings.
Message: ReferenceError: 'Name' is not defined;
Bindings value: value: Name

Answer 1

I believe you have a capitalization error.
data-bind="with : Group"
Should be
data-bind="with : group"

Answer 2

I have solved this puzzle!
The error is simply: in CreateEditGroup.js I have declared a variable that have called Group and an object called group
var Group = function (group)
{
var self = this;
self.GroupID = ko.observable(gruppo ? gruppo.GroupID : 0).extend({ required: true });
self.Name = ko.observable(gruppo ? gruppo.Name : '').extend({ required: true });
};
I have modified the name of the object passed in this function with another name and finally works!
var Group = function (gruppo)
{
var self = this;
self.GroupID = ko.observable(gruppo ? gruppo.GroupID : 0).extend({ required: true });
self.Name = ko.observable(gruppo ? gruppo.Name : '').extend({ required: true });
};
Thank you all for the help!