对可观察数组中的项目进行更改后，如何立即看到更新？

Question

我正在尝试编辑表格单元格的内容，我不想直接在表格中编辑值，而是需要使用textarea，输入一些文本并单击按钮来更新表格单元格。

我尝试使用JQuery进行此操作并直接更新Observable Array ，但是，直到在Select Options项之间进行切换，我才能看到更改。

这是显示上述完整示例的JSFiddle 。

如何编写此代码，以便对Observable Array项进行更改后可以立即看到更改？

Answer 1

您的生物财产不可观察，因此为什么它不会更新。 我进行了一些小更改，使您的Bio可见，因此在您单击按钮时更新，而不是在重新加载艺术家https://jsfiddle.net/jpntrx41/时更新 。 更改包括以下几个方面：

self.artistDetail = ko.observableArray([{
    "ArtistId": "1",
    "Bio": ko.observable("Jon Secada is a Cuban American singer and songwriter. " +
      "Secada was born in Havana, Cuba, and raised in Hialeah, Florida. " +
      "He has won two Grammy Awards and sold 20 million albums since his " +
      "English-language debut album in 1992")
  },

  {
    "ArtistId": "2",
    "Bio": ko.observable("Céline Marie Claudette Dion, CC OQ ChLD is a Canadian " +
      "singer, songwriter, businesswoman and occasional actress.")
  }
]);


$(function() {
  $('#update').click(function(event) {
    var updateText = $('#update-bio').val();

    if (viewModelA.SelectedArtist()) {

      var currText = viewModelB.artistDetail()[viewModelA.SelectedArtist().value - 1].Bio();

      viewModelB.artistDetail()[viewModelA.SelectedArtist().value - 1].Bio().replace(currText,
        viewModelB.artistDetail()[viewModelA.SelectedArtist().value - 1].Bio(updateText));
    }
  });
});

尽管上面的代码满足您单击按钮时自动更新Bio的要求，但您的代码结构以及Knockout和jQuery的混合让我有些困惑。 显然，我不知道您要尝试执行的操作的全局图，但是值得回顾一下结构，看看是否可以简化一下。

这是一个非常快速的工作示例，它使用Knockout从1个视图模型中运行所有操作http://plnkr.co/edit/3UYAQjJmbdyn1rYxZj9m?p=preview