Knockoutjs and binding-Collection of common programming errors

11 years ago
admin
3 minutes

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];
                    }
                }
                $("").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";
}

Nuovo gruppo






















Salva


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



    

  1. 

    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!
    

    2. 

  2. 

    I believe you have a capitalization error.
    

    data-bind="with : Group"

    

    Should be
    

    data-bind="with : group"

    

    3.