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

【问题标题】：How do I instantly see an update after making changes to an item in an observable array?对可观察数组中的项目进行更改后，如何立即看到更新？
【发布时间】：2015-12-16 13:59:27
【问题描述】：

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

我尝试使用JQuery 执行此操作并直接更新Observable Array，但是，直到我在“选择选项”项之间切换时才看到更改。

这是上面提到的JSFiddle showing the complete example。

我该如何编写，以便在对 Observable Array 项进行更改后立即看到更改？

【问题讨论】：

标签： javascript knockout.js knockout-2.0

【解决方案1】：

您的 Bio 属性不可观察，因此它不会更新。我做了一些小改动以使您的 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 http://plnkr.co/edit/3UYAQjJmbdyn1rYxZj9m?p=preview从 1 个视图模型运行它

【讨论】：

非常感谢！！我完全同意，我发布的方法是简单地获得一个试探性的工作模型，当我更倾向于时，改进它。我尝试实现仅KnockoutJS 的解决方案，但开始遇到问题，随着我对框架越来越熟悉，大部分问题都会得到解决。
完全没问题。了解模式的概念可能需要一些时间，但你使用它的次数越多，你就会学到越多！祝你好运:)