Knockoutjs绑定问题

时间:2013-12-23 03:49:39

标签: knockout.js

我通过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}

我不明白我如何发送数据来点击回调函数,第二个例子中这个奇怪的结果是什么?

1 个答案:

答案 0 :(得分:3)

console.log函数不了解如何打开observable。所以必须为它解开它。通过简单地执行像

这样的observable
console.log(lesson.teacher());

或使用util函数ko.unwrap

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

后者具有使用observable和non observables的好处

相关问题