Как связать данные с несколькими областями из одной и той же модели просмотра и с тем же наблюдаемым массивом?

Question

У меня есть данные в наблюдаемом массиве, который я использую для привязки к select option.

Источник данных:

 self.Artist = ko.observableArray([{ 
      "ArtistId": "1", 
      "LastName": "Hunter", 
      "FirstName": "Alfonzo", 
      "Category": "Vocalist", 
      "Genre": "Rythm and Blues", 
      "DOB": "1/1/1973" 
     }, 
     { 
      "ArtistId": "2", 
      "LastName": "Brown", 
      "FirstName": "Horace", 
      "Category": "Vocalist", 
      "Genre": "Rythm and Blues", 
      "DOB": "1/1/1981", 
     }, 
     { 
      "ArtistId": "2", 
      "LastName": "Erik", 
      "FirstName": "Sermon", 
      "Category": "Rapper and Record Producer", 
      "Genre": "HipHop", 
      "DOB": "1/1/1977" 
     }, 
     { 
      "ArtistId": "3", 
      "LastName": "Savage", 
      "FirstName": "Chantay", 
      "Category": "Vocalist", 
      "Genre": "Rythm and Blues", 
      "DOB": "1/1/1982" 
     }]); 

Опция:

<select data-bind="options: artists, 
        optionsText: 'FullName', 
        value: selectedArtist"></select> 

Компьютерная Observable:

self.artists = ko.computed(function() { 
     return ko.utils.arrayMap(Artist(), 

      function (data) { 

       return { 
        FullName: data.FirstName + ' ' + data.LastName, value: data.ArtistId 
       } 
      }); 
    }); 

Это работает как п но мне также необходимо привязать остальные данные к ul или paragraph, когда художник выбран из select option: например. Жанр, Категория и так далее.

мне нужно использовать тот же наблюдаемый массив и , если это возможно то же вычисленное наблюдаемый: Не уверен, как это будет работать.

Например позволяет сказать, что пользователь выбирает: Alphonzo Hunter из select option, а затем следующие данные связываются с ул или другой части страницы:

"LastName": "Hunter", 
"FirstName": "Alfonzo", 
"Category": "Vocalist", 
"Genre": "Rythm and Blues", 
"DOB": "1/1/1973" 

Вот работает JSFiddle без дополнительных креплений:

Единственный способ, которым я знаю, как это сделать, - создать несколько источников данных, а не передавать выбранное значение в качестве аргумента другому вычисленному наблюдаемому для дополнительной привязки.

Если я пытаюсь что-то вроде этого, он не работает: LastName is undefined:

 self.artistDeatail = ko.computed(function() { 
      return ko.utils.arrayFilter(Artist(), function (item) { 
       return item.ArtistId === self.selectedArtist().value; 
      }); 
     }); 

Answer 1

Ваш self.artists наблюдаемым массив содержит элементы с двумя свойствами - только FullName и value. В качестве быстрого исправления, чтобы сохранить все свойства ваших исходных данных Artist и добавить некоторые новые реквизиты, такие как FullName, я предлагаю вам передать исходные данные через функцию-конструктор, а затем заполнить наблюдаемый массив этими новыми объектами.

Таким образом, у вас будет доступ ко всем свойствам выбранного исполнителя и вы можете использовать их в любом элементе вашей страницы - нет ограничений на количество элементов, которые вы можете привязать к своей модели просмотра.

Проверить демо: JS Fiddle