knockout.js - 当用户单击查看详细信息时，使用 knockoutjs 加载子项

Question

我有一份人员名单，每个人都有一份宠物名单。我想获取页面加载的人员列表。如果用户单击查看宠物，我只想加载一个人的宠物列表

这是jsfiddle使用coffeescript

http://jsfiddle.net/eiu165/rScSL/15/

getPets 似乎只是在加载时被一遍又一遍地调用

<a href="#" data-bind="click: $root.getPets()">view pets</a>

编辑

我已经通过直接向 Person 对象添加方法来解决这个问题。
http://jsfiddle.net/eiu165/rScSL/22/

Answer 1

当您使用click绑定（或event绑定）时，您希望将其绑定到对函数的引用，而不是对它的实际调用。

所以，你只想做：

<a href="#" data-bind="click: $root.getPets">view pets</a>

否则，代码实际上正在执行。除非函数返回您要使用的实际函数，否则您可能不想这样做。

Answer 2

我不知道我可以向 Person 类添加方法

我在 Person 中添加了 getPets 方法以获取我自己的宠物列表

Person = (data) ->
    name = ko.observable(data.name)
    lname = ko.observable(data.lname)  
    pets = ko.observableArray(data.pets)  
    getPets = (person) ->  
        data = '{"pets":[
            {"age": "5", "type": "dog"},
            {"age": "4", "type": "cat"}
        ]}'  
        json = $.parseJSON(data).pets 
        mappedItems = $.map(json , (i)->  Pet(i)  )  
        pets(mappedItems) 
    name:name
    lname:lname 
    pets:pets  
    getPets:getPets        

http://jsfiddle.net/eiu165/rScSL/21/