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>

Computed 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，则以下数据将绑定到ul或页面的其他部分：

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

这是一个没有附加绑定的工作JSFiddle：

我知道如何执行此操作的唯一方法是创建多个数据源，然后将所选值作为参数传递给另一个计算的observable以进行其他绑定。

如果我尝试这样的事情，它就不起作用：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

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

1 个答案: