CODEWITHSUNDEEP
knockout.js
Elisabeth
Elisabeth

Reputation: 21226

Clicked table row bound via knockoutjs gets not selected

I want to make a simple table row selectable by clicking on it just like here:

http://jsfiddle.net/rniemeyer/APzK8/6/

I applied the above logic but still nothing is selected, what do I wrong?

The data is displayed correctly, just the selecting does not work.

define(['services/dataservice'], function (dataservice) {

    var self = this;
    this.Selected = ko.observable();
    var schoolyears = ko.observableArray();

    this.SelectSchoolyear = function (config) {
        self.Selected(config);
    };

    this.Selected(schoolyears()[0]);

    var vm = {
        activate: activate,
        schoolyears: schoolyears,
        title: 'Schoolyears'
        };
    return vm;

    function activate(){
        var schoolyearModels = dataservice.getSchoolyears();
        var schoolyearViewModels = [];
        for (var i = 0; i < schoolyearModels.length; i++){
            var e = schoolyearModels[i];
            var schoolyearViewModel = new SchoolyearViewModel(e.schoolyearId, e.schoolyearName, e.from, e.to, e.lastEdited, self.Selected);
            schoolyearViewModels.push(schoolyearViewModel);
        }
        return schoolyears(schoolyearViewModels);
    }
    function SchoolyearViewModel(id, schoolyearName, from, to, lastEdited, selected){
        var me = this;
        this.schoolyearId = id;
        this.schoolyearName = ko.observable(schoolyearName);
        this.from = ko.observable(from);
        this.to = ko.observable(to);
        this.lastEdited = ko.observable(lastEdited);
        this.AmISelected = ko.computed(function (){
            debugger;
            return selected() === me;
        });
    }  

});


<section id="schoolyears-view" class="view">
    <a class="btn btn-info btn-force-refresh pull-right" data-bind="click: remove" href="#"><i class="icon-remove"></i>Delete</a>

    <table class="table table-striped table-bordered table-condensed">
        <thead>
            <tr>
                <th style="width: 25%">Schoolyear name</th>
                <th style="width: 25%">From</th>
                <th style="width: 25%">To</th>
                <th style="width: 250%">Last edited</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: schoolyears">
            <tr data-bind="click: $parent.SelectSchoolyear, css: { selected: AmISelected }, attr: { 'data-id': schoolyearId }" >
                <td data-bind="text: schoolyearName()"></td>
                <td data-bind="text: from()"></td>
                <td data-bind="text: to()"></td>
                <td data-bind="text: lastEdited()"></td>
            </tr>
        </tbody>
    </table>
</section>

Upvotes: 0

Views: 1438

Answers (1)

Cyanfish
Cyanfish

Reputation: 4163

The issue seems to be that Knockout is looking for the remove and SelectSchoolyear methods on the vm object, but they aren't present. They're only on the this object.

Here's a solution (note that you still need an implementation for remove):

var vm = {
   activate: activate,
   schoolyears: schoolyears,
   title: 'Schoolyears',
   SelectSchoolyear: self.SelectSchoolyear,
   remove: function () {}
};

This assumes that activate is called somewhere.

vm.activate();

I've made a working JSFiddle here.

Note: To view binding errors (like the ones I mentioned), just use your browser's developer console (Knockout will throw exceptions).

Upvotes: 1

Related Questions