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

时间:2015-12-16 13:59:28

标签: javascript knockout.js knockout-2.0

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

我尝试使用JQuery执行此操作并直接更新Observable Array,但是,在切换选择项目之前,我看不到更改。

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

如何编写此代码以便在更改Observable Array项后立即看到更改?

1 个答案:

答案 0 :(得分:2)

您的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个视图模型运行它