[KnockoutJs]foreachの中でdata-bindさせたvalueを取得

概要

簡単なtodo作成・削除ができるプログラム。todosをforeachさせていて、removeTodoするときにidをとりたい。todo自体は、公式tutorialを参考にしています(http://learn.knockoutjs.com/#/?tutorial=intro )。

view.html

<ul class="list-unstyled" data-bind="foreach: todos">
    <li class="clearfix" data-bind="value: id">
        <input data-bind="value: content" />
        <a href="#" data-bind="click: $root.removeTodo">Remove</a>
    </li>
</ul>

<form data-bind="submit: addTodo">
    <input data-bind="value: newTodoContent" />
    <button type="submit">Add Task</button>
</form>

調査

以下のviewmodel.jsで、①②③の実行結果を調べた。

viewmodel.js

function TodoViewModel() {
    var self = this;
    self.todos = ko.observableArray([]);
    self.newTodoContent = ko.observable();

    // 省略....

    self.removeTodo = function(todo) { 
        self.todos.destroy(todo) 
        console.log(ko.toJSON({ todo: todo.id })); // ①
        console.log(todo.id); // ②
        console.log(todo.id()); // ③
    }
}

① console.log(ko.toJSON({ todo: todo.id })); の結果

結果。

ただしこれはObjectではなく文字列になってしまっているよう。

{"todo":3} 

② console.log(todo.id); の結果

結果。

プロパティの値はオブジェクトになっていて、値の取得と設定は普通のプロパティのように行えません。そのままだと関数オブジェクトが返ってきて残念な結果になります(参考：http://blog.shibayan.jp/entry/20111215/1323875100 )。

function d(){if(0<
arguments.length)return d.Pa(c,arguments[0])&&(d.X(),c=arguments[0],d.W()),this;a.k.Jb(d);return c}

③ console.log(todo.id()); の結果

結果。

そのままだと関数オブジェクトが返ってくるので、これが正解みたいです。

3