当用户单击查看详细信息时，使用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类中添加方法

我在人物中添加了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/