동일한 뷰 모델과 동일한 관찰 가능한 배열의 여러 영역에 데이터를 바인딩하는 방법은 무엇입니까?

바인딩하는 데 사용하는 관찰 가능한 배열에 데이터가 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>

계산 된 관찰 가능 :

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

            function (data) {

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

이것은 필요에 따라 작동하지만 나머지 데이터를 a 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;
            });
        });