如何将数据从同一个视图模型和同一个可观察数组绑定到多个区域？

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 选项：

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

这可以根据需要工作，但是，当从 select option 中选择艺术家时，我还需要将其余数据绑定到 ul 或 paragraph：例如类型、类别等。

我需要使用相同的可观察数组，并且 如果可能的话 相同的计算可观察数组：不确定这将如何工作。

例如，假设用户从 select option 中选择：Alphonzo Hunter，然后以下数据将绑定到 ul 或页面的另一部分：

"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

如何将数据从同一个视图模型和同一个可观察数组绑定到多个区域？

How to bind data to multiple areas from the same view model and the same observable array?

knockout-2.0

knockout.js