Как обновить содержимое ячейки таблицы из другого контекста привязки нокаута JS с использованием другого текстового поля в качестве источника?

Question

Я пытаюсь отредактировать или обновить ArtistBio, который связан с использованием Knockout foreach loop. Тем не менее, мне нужно сделать это, используя textarea, а затем нажмите отправить, чтобы выполнить обновление.

Вот JSfiddle example:

Что толку в том, что данные BIND с использованием foreach loop и поэтому нет нет Artist Bio observable. А также, как мне сделать это обновление, если текстовая область находится в другом контексте, а это значит, что источник обновления не находится в модели просмотра, выполняющей первоначальное связывание?

Как сделать это обновление Artist Bio так, чтобы обновлялась ячейка таблицы, содержащая текст?

Я попытался сделать это таким образом, используя JQuery и писать непосредственно к Observable Array:

Обновление HTML код:

Update Bio

<table> 
    <thead> 
    <tr> 
     <th>Artist ID</th> 
     <th>Musical Bio</th> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: ArtistBio"> 
    <tr> 
     <td data-bind="text: ArtistId"></td> 
     <td> 
      <textarea readonly="readonly" data-bind="value: Bio"></textarea> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Обновленный код JS:

function ViewModelA() { 

     var self = this; 

     self.SelectedArtist = ko.observable(); 

     var artistList = [{ 
      "ArtistId": "1", 
      "LastName": "Secada", 
      "FirstName": "Jon" 
     }, 

      { 
       "ArtistId": "2", 
       "LastName": "Dion", 
       "FirstName": "Celine" 

      } 
     ]; 


     self.Artists = ko.computed(function() { 
      return ko.utils.arrayMap(artistList, 

        function(artist) { 

         return { 

          FullName: artist.FirstName + ' ' + artist.LastName, 
          value: artist.ArtistId 
         } 
        }); 
     }); 
    } 

    function ViewModelB(vma) { 

     var self = this; 

     self.artistDetail = ko.observableArray([{ 
      "ArtistId": "1", 
      "Bio": "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": "Céline Marie Claudette Dion, CC OQ ChLD is a Canadian " + 
       "singer, songwriter, businesswoman and occasional actress." 
      } 
     ]); 




     self.ArtistBio = ko.computed(function() { 
      if (vma.SelectedArtist()) { 
       return ko.utils.arrayFilter(self.artistDetail(), function(item) { 

        // Access the selected value here and return matching actist 
        return item.ArtistId === vma.SelectedArtist().value; 
       }); 
      } 
     }); 

    } 

    var viewModelA = new ViewModelA(); 
    var viewModelB = new ViewModelB(viewModelA); 

    ko.applyBindings(viewModelA, document.getElementById('artist-list')); 
    ko.applyBindings(viewModelB, document.getElementById('artist-detail')); 

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

     if(viewModelA.SelectedArtist()) { 

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

Используя вышеизложенное, я могу напрямую изменить значение массива. Однако мне нужно повторно выбрать исполнителя, чтобы увидеть изменение. Как мне сразу показать изменение на submit?

Я не уверен, как это сделать.

Answer 1

Если вы измените ваш textarea не быть readonly и использовать value связывания вместо text, вы можете изменить его, где он находится.

<textarea data-bind="value: Bio"></textarea> 

Ваша скрипка не включает в себя какую-то отдельную область для редактирования информации, так что не ясно, каким образом вы хотите, чтобы работать. В вашем примере кода событие jQuery привязано к идентификатору, который отсутствует в вашем обновленном HTML, но вы не должны использовать jQuery DOM-селектора в своей модели просмотра в любом случае.

Я рекомендую не иметь отдельные режимы просмотра для разных разделов. У вас есть только одна модель, включающая все части. Если вы хотите иметь модульные компоненты, используйте Knockout components.