Javascript 绑定在敲除JS中不起作用

HTML代码

<ul id="cat-list" data-bind="foreach: catList()">
    <li data-bind="text: name, click: $parent.setCurrentCat"> </li>
</ul>
<div id="cat" data-bind="with: currentCat()">

    <h2 data-bind="text: name" id="cat-name"></h2>

    <div data-bind="text: clickCount" id="cat-count"></div>
    <img src="" data-bind="click: $parent.incrementCount, attr: {src: imgSrc}" id="cat-img" alt="cute cat">
    <h4>NickNames</h4>
    <ul data-bind="foreach: nickNames">
        <li data-bind="text: $data"></li>
    </ul>

</div>
<script src="js/lib/knockout-3.2.0.js"></script>
<script src="js/app.js"></script>

ViewModel中的InitialCAT是一个包含所有cat信息的数组。 catlist的一个示例元素是

{
    clickCount: 0,
    name: 'Tabby',
    imgSrc: 'tabby.jpg',
    imgAttribution: 'Aman',
    nickNames: ['Tabtab', 'T-bone', 'Mr. T', 'Tabitha Tab Tabby']
}

尽管单击li元素会更改当前cat，但不会渲染相应的视图。和仅渲染中的默认cat（第一个cat）。我错过什么了吗

它不起作用可能是因为您正在覆盖

currentCat

observable，而不是更新

setCurrentCat

中的内部对象。因此，将

self.currentCat=ko.observable（cat）

更改为

self.currentCat（cat）

下面是一个工作片段：


var initialCats=[{
点击次数：0，
名称：“Tabby”，
imgSrc:'https://s20.postimg.org/owgnoq5c9/cat_1.jpg',
感叹词：“阿曼”，
昵称：['Tabtab'，'T-bone'，'Mr.T'，'Tabitha Tab Tabby']
}, {
点击次数：0，
名字：“汤姆”，
imgSrc:'https://s20.postimg.org/f9d5f0ccp/cat_2.jpg',
感叹词：“阿曼”，
昵称：[“汤米”、“提米”]
}]
var ViewModel=函数（）{
var self=这个；
this.catList=ko.observearray（[]）；
initialCats.forEach（函数（catItem）{
self.catList.push（新Cat（catItem））；
});
this.currentCat=ko.observable（this.catList（）[0]）；
this.incrementCount=函数（）{
self.currentCat（）.clickCount（self.currentCat（）.clickCount（）+1）；
};
this.setCurrentCat=功能（cat）{
//在这里换车
自电流猫（cat）；
}
}
var Cat=功能（数据）{
this.clickCount=ko.可观察（data.clickCount）；
this.name=ko.observable（data.name）；
this.imgSrc=ko.可观察（data.imgSrc）；
this.imgAttribution=ko.可观察（data.imgAttribution）；
this.昵称=ko.observable（data.昵称）；
}
ko.applyBindings（新ViewModel（））




绰号



答案是可行的，尽管我不完全理解为什么会这样@aman我的理论是，在调用
applyBindings（）
之后添加的任何新的可观察对象都不会起作用。当您这样做时，
self.currentCat=ko.observable（cat）
它将覆盖以前的可观察对象的依赖项，并且不会绑定新的可观察对象，除非您再次
cleanNode
和
applyBindings
。
{
    clickCount: 0,
    name: 'Tabby',
    imgSrc: 'tabby.jpg',
    imgAttribution: 'Aman',
    nickNames: ['Tabtab', 'T-bone', 'Mr. T', 'Tabitha Tab Tabby']
}