Knockoutjs problems with binding

Question

I create a lesson shedule by means of knockout.js I have some object

function Lesson (time){
    self=this;
    self.name = 'Empty';
    self.teacher = 'Set name';
    self.room = '';
    self.time = time;
}

And View model

function SheduleViewModel() {
// Data
var self = this;

self.dayOfWeek      = ['Mo','Tu','We','Th','Fr','Sa'];
self.timeLessons    = {head:'Time',body:['08:30-09:55',"10:10-11:35","11:50-   13:15","13:45-15:10","15:25-16:50","17:05-18:30","18:40-20:00"]};

self.initShedule = function(){
    var temp = [];
    for(var i = 0; i < self.dayOfWeek.length; ++i)
    {
        var dayLessons = [];

        for(var j = 0; j < self.timeLessons['body'].length; ++j ){
            dayLessons.push(new Lesson(self.timeLessons['body'][j]));
        }
        temp.push({dayName: self.dayOfWeek[i],lessons:dayLessons})
    }
    return temp;
}
self.shedule = self.initShedule();

     self.selectLesson = function(lesson){
         console.log(lesson.teacher);
     }
     self.addLesson = function(){
         shedule[$('#dayOfWeek').value]
     }

};

some HTML

<tr data-bind="foreach: shedule">
    <td class="day">
        <div class="head" style="height: 40px;">
             <div class="headText" data-bind="text: dayName"></div>
        </div>
        <div class="body" data-bind="foreach: lessons">
             <div data-bind="click: $root.selectLesson" class="bodyBlock lesson" style="height: 60px;" id="lesson">
               <div class="bodyText" data-bind="text: time"></div>
               <div class="bodyText" data-bind="text: teacher"></div>
            </div>
        </div>
   </td>
</tr>

This code is work. If i call function 'selectLesson', the console displays 'Set name', but if i replace

self.teacher = 'Set name';

by

self.teacher = ko.observabel('Set name');

then console displays

function c(){if(0<arguments.length)return   c.equalityComparer&&c.equalityComparer(d,arguments[0])||(c.O(),d=arguments[0],c.N()),this;a.i.lb(c);return d}

I don't understand how i can send data to click callback function and what is this strange result in second example?

Answer 1

The console.log function does not understand how to unwrap the observable. So gotta unwrap it for it. Either by simply executing the observable like

console.log(lesson.teacher());

or by using the util function ko.unwrap

console.log(ko.unwrap(lesson.teacher));

The later has the benefit of working with both observables and non observables