Question

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>

JS代码：

var ViewModel = function() {
     var self = this;

    this.catList = ko.observableArray([]);
    initialCats.forEach(function(catItem) {
        self.catList.push( new Cat(catItem) );
    });

    this.currentCat = ko.observable( this.catList()[0]);

    this.incrementCount = function(){
        self.currentCat().clickCount(self.currentCat().clickCount()+1);
    };
    this.setCurrentCat = function(cat) {

    self.currentCat = ko.observable(cat);
    console.log(self.currentCat);
}

var Cat = function(data) {
    this.clickCount = ko.observable(data.clickCount);
    this.name = ko.observable(data.name);
    this.imgSrc = ko.observable(data.imgSrc);
    this.imgAttribution = ko.observable(data.imgAttribution);
    this.nickNames = ko.observable(data.nickNames);
}

ko.applyBindings(new ViewModel())

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

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

Althouch单击li元素会更改当前cat，但不会渲染相应的视图。而且只有渲染的默认猫（第一只猫）。我错过了什么。？

Answer 1

它不能正常工作可能，因为您正在覆盖currentCat observable，而不仅仅是更新setCurrentCat内的内部对象。因此，请将self.currentCat = ko.observable(cat)更改为self.currentCat(cat);

这是一个工作片段：

＆＃13;

var initialCats = [{
  clickCount: 0,
  name: 'Tabby',
  imgSrc: 'https://s20.postimg.org/owgnoq5c9/cat_1.jpg',
  imgAttribution: 'Aman',
  nickNames: ['Tabtab', 'T-bone', 'Mr. T', 'Tabitha Tab Tabby']
}, {
  clickCount: 0,
  name: 'Tom',
  imgSrc: 'https://s20.postimg.org/f9d5f0ccp/cat_2.jpg',
  imgAttribution: 'Aman',
  nickNames: ['Tommy', 'Timmy']
}]

var ViewModel = function() {
  var self = this;

  this.catList = ko.observableArray([]);
  initialCats.forEach(function(catItem) {
    self.catList.push(new Cat(catItem));
  });

  this.currentCat = ko.observable(this.catList()[0]);

  this.incrementCount = function() {
    self.currentCat().clickCount(self.currentCat().clickCount() + 1);
  };
  this.setCurrentCat = function(cat) {
    // change here
    self.currentCat(cat);
  }
}
var Cat = function(data) {
  this.clickCount = ko.observable(data.clickCount);
  this.name = ko.observable(data.name);
  this.imgSrc = ko.observable(data.imgSrc);
  this.imgAttribution = ko.observable(data.imgAttribution);
  this.nickNames = ko.observable(data.nickNames);
}

ko.applyBindings(new ViewModel())

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<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>

＆＃13;

Here's a working fiddle

绑定不适用于淘汰JS

1 个答案: