對可觀察數組中的項目進行更改后，如何立即看到更新？

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