Knockout unable to process binding in a specific function

Question

I am new to knockout and have a problem with a particular binding. I am using SharePoint to get user properties, display them and save it to a sharepoint list. I have other bindings and they work well. Here is what I have:

    <div id="custom-new-form">
    <a data-bind="click: $root.AddRow" href="javascript:void(0)">Add</a>
    <table id="sales-returns-table" data-bind="visible: EntityRows().length > 0">
            <thead>
                <tr>
                    <th>Entity</th>
                    <th>Role</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!--<td data-bind="text: ($index() + 1)"></td>-->
                    <td>
                        <select class="lookup-select" data-bind="options: $root.Entities, optionsText: 'Title', optionsValue: 'Title', value: entity"></select>
                    </td>
                    <td>
                        <select class="lookup-select" data-bind="options: $root.Roles, optionsText: 'Title', optionsValue: 'Title', value: role"></select>
                    </td>
                    <td>
                           <a data-bind="click: $root.RemoveRow" href="javascript:void(0)">X</a> 
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

Here is my js:

    var newUser;
    (function (newUser) {
var NewForm;
(function (NewForm){
    var LookupValue = (function () {
        function LookupValue(id, title) {
            this.Id = id;
            this.Title = title;
        }
        return LookupValue;
    }());
    var EntityRow=(function(){
        function EntityRow(parent) {
            var _this=this;
            this.Parent=parent;
            //this.RowId=SP.Guid.newGuid().toString();
            this.entity=ko.observable('');
            this.role=ko.observable('');
        }
        return EntityRow;
    }());
    var Model=(function () {
        function Model() {
            var _this=this;
            this.isid= ko.observable('');
            //for user
            this.firstName = ko.observable();
            this.lastName=ko.observable();
            this.posTitle=ko.observable();
            this.email=ko.observable();
            this.phone=ko.observable();

            //for approver
            this.approverISID= ko.observable('');
            this.approverName=ko.observable();
            this.approverposTitle=ko.observable();

            //for row
            this.EntityRows=ko.observableArray();

            //for Enitities             
            //this.entity=ko.observable(0);

            //for Roles
            //this.role=ko.observable(0);

            //for Entities and Roles
            this.Entities=[];
            this.Roles=[];
            }
        Model.prototype.AddRow=function(){
            this.EntityRows.push(new EntityRow(this));
        };
        Model.prototype.RemoveRow = function (row) {
            row.Parent.EntityRows.remove(row);
        };
        return Model;
    }());
     function GenerateLookupValuesArray(data) {
        var itemEnumerator = data.getEnumerator();
        var lookupValuesArray = [];
        // Add empty row
        lookupValuesArray.push(new LookupValue(0, ''));
        while (itemEnumerator.moveNext()) {
            var listItem = itemEnumerator.get_current();
            var lookupValue = new LookupValue(listItem.get_id(), listItem.get_item('Title'));
            lookupValuesArray.push(lookupValue);
        }
        return lookupValuesArray;
    }
    NewForm.GenerateLookupValuesArray = GenerateLookupValuesArray;
    function Init() {
        var entitiesPromise = RequestController.getItemsFromList('Entity', '<View><Query></Query></View>', 'Include(Id, Title)');
        var rolesPromise =  RequestController.getItemsFromList('Roles', '<View><Query></Query></View>', 'Include(Id, Title)');
        $.when(entitiesPromise, rolesPromise).done(function (entityResult, roleResult) {
            var model=new Model();
            model.Entities = GenerateLookupValuesArray(entityResult);
            model.Roles = GenerateLookupValuesArray(roleResult);
            ko.applyBindings(model, $('#custom-new-form')[0]);
            $('#custom-new-form').show();
        });
    }
    NewForm.Init = Init;
})(NewForm = newUser.NewForm || (newUser.NewForm = {}));
})(newUser || (newUser = {}));
(function () {
SP.SOD.executeOrDelayUntilScriptLoaded(newUser.NewForm.Init, 'sp.js');
    })();   

I get the error Uncaught ReferenceError: Unable to process binding "value: function (){return entity }". Please note that if I put the entity as observable inside the Model, it works well. But I need it as part of SalesReturnRow so I can push it into an array and use it for later.

Answer 1

As it is, you're trying to bind entity, but entity is a property of an EntityRow and your scope is still Model. It's pretty clear that you want your table to display EntityRows, but you haven't set that up. You should have:

<tr data-bind="foreach: EntityRows">