Knockoutjs 绑定问题答案

【问题标题】：Knockoutjs problems with bindingKnockoutjs 绑定问题
【发布时间】：2013-12-23 16:57:14
【问题描述】：

我通过 knockout.js 创建了一个课程表我有一些对象

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

并查看模型

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]
     }

};

一些 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>

此代码有效。如果我调用函数'selectLesson'，控制台会显示'Set name'，但如果我替换

self.teacher = 'Set name';

通过

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

然后控制台显示

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}

我不明白如何将数据发送到点击回调函数，第二个示例中这个奇怪的结果是什么？

【问题讨论】：

标签： knockout.js

【解决方案1】：

console.log 函数不理解如何解开 observable。所以必须为它打开包装。要么通过简单地执行可观察的类似

console.log(lesson.teacher());

或者通过使用 util 函数ko.unwrap

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

后者的好处是同时使用可观察对象和不可观察对象

【讨论】：