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

Question

I am attempting to edit the content of a table cell, I do not want to edit the value directly in the table, instead I need to use a textarea, enter some text and hit a button to update the table cell.

I tried doing this using JQuery and updating the Observable Array directly, however, I do not see the changes until I switch between the Select Options items.

Here is a JSFiddle showing the complete example mentioned above.

How do I write this so that I can see the changes instantly after making changes to the Observable Array item?

Answer 1

Your Bio property isn't observable, hence why it doesn't update. I've made some small changes to make your Bio observable and therefore update when you click the button rather than when you reload the artist https://jsfiddle.net/jpntrx41/ . The changes are in the following areas:

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));
    }
  });
});

While the above meets the requirement of automatically updating the Bio when you click the button, I'm a bit confused by your code structure and mix of Knockout and jQuery. Obviously I don't know the bigger picture of what it is exactly that you're trying to do but it's worth reviewing your structure to see if you can simplify it a bit.

Here's a really quick working example running it all from 1 view model with Knockout http://plnkr.co/edit/3UYAQjJmbdyn1rYxZj9m?p=preview