Knockout.js 如何在knockout中绑定到可观察数组中的项？

我有以下可观察阵列：

self.Profiles =ko.observableArray( ko.utils.arrayMap(initialData, function (profile) {
                return {
                    StartDate : formatDateOnly(profile.StartDate),
                    EndDate : formatDateOnly(profile.EndDate),
                    ProfileID :profile.ID,
                    ProfileName : profile.Name,
                    ProjectName : profile.ProjectName,
                    ReadingListID : profile.ReadingListID,
                    ReadingListName : profile.ReadingListName

                };
            }));

我希望将下拉列表绑定到配置文件以显示配置文件名称，如果下拉列表的值发生更改，则我希望使用新的对应值更新span元素以显示选定的profileID

<table id="readingListApplyToProfile" class="fullWidthTable">
        <tr>
            <td>
                Profile:
            </td>
            <td>
                <select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID'"></select>
            </td>
        </tr>
        <tr>
            <td>
                End Date:
            </td>
            <td>
                <span data-bind="'text':EndDate"></span>
            </td>
        </tr>
    </table>

轮廓：
结束日期：

---

我无法更新跨距，因为跨距元素不知道下拉列表值，有人能帮我吗。我完全迷路了。

您缺少的是下拉列表中的值绑定。这是我创作的小提琴

希望有帮助

---

Suj

您缺少的是下拉列表中的值绑定。这是我创作的小提琴

希望有帮助

---

Suj

我想到了一个computedObservable，它接收ProfileID并输出与该ID对应的概要文件，然后将跨度绑定到输出对象的各种属性。令人惊讶的是，它成功了。我在摆弄苏杰什·阿鲁基尔的小提琴来尝试我的想法，所以模型非常相似

显示多个跨度的工作示例：

模型：

var myViewModel = function()
{
    var self = this;
        self.Profiles =ko.observableArray([{
                    StartDate : '02/01/2012',
                    EndDate : '01/01/2013',
                    ProfileID :10,
                    ProfileName : 'Some Name',
                    ProjectName : 'Some Project',
                    ReadingListID : 100,
                    ReadingListName : 'Some List',
                },
                {
                    StartDate : '12/01/2012',
                    EndDate : '02/27/2013',
                    ProfileID :12,
                    ProfileName : 'New Name',
                    ProjectName : 'New Project',
                    ReadingListID : 200,
                }]);

    self.selectedProfileId = ko.observable();

    self.getProfile = ko.computed({
        read: function() {
            for (var i = 0; i < self.Profiles().length; i++) {
                if (self.Profiles()[i].ProfileID == self.selectedProfileId()) {
                    return self.Profiles()[i];
                }
            }
            // in case there was no match, output a blank Profile
            return [{
                    StartDate : '',
                    EndDate : '',
                    ProfileID : '',
                    ProfileName : '',
                    ProjectName : '',
                    ReadingListID : '',
                    ReadingListName : ''
            }];
        },
        write: function(value) {
            self.selectedProfileId(value);
        },
        owner: self
    });
}

ko.applyBindings(new myViewModel());

HTML：

<table id="readingListApplyToProfile" class="fullWidthTable">
    <tr>
        <td>
            Profile:
        </td>
        <td>
            <select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID', value: getProfile "></select>
        </td>
    </tr>
    <tr>
        <td>
            End Date:
        </td>
        <td>
            <span data-bind="text: getProfile().ProfileName"></span>
        </td>
    </tr>
</table>

轮廓：
结束日期：

我想到了一个computedObservable，它接收ProfileID并输出与该ID对应的概要文件，然后将跨度绑定到输出对象的各种属性。令人惊讶的是，它成功了。我在摆弄苏杰什·阿鲁基尔的小提琴来尝试我的想法，所以模型非常相似

显示多个跨度的工作示例：

模型：

var myViewModel = function()
{
    var self = this;
        self.Profiles =ko.observableArray([{
                    StartDate : '02/01/2012',
                    EndDate : '01/01/2013',
                    ProfileID :10,
                    ProfileName : 'Some Name',
                    ProjectName : 'Some Project',
                    ReadingListID : 100,
                    ReadingListName : 'Some List',
                },
                {
                    StartDate : '12/01/2012',
                    EndDate : '02/27/2013',
                    ProfileID :12,
                    ProfileName : 'New Name',
                    ProjectName : 'New Project',
                    ReadingListID : 200,
                }]);

    self.selectedProfileId = ko.observable();

    self.getProfile = ko.computed({
        read: function() {
            for (var i = 0; i < self.Profiles().length; i++) {
                if (self.Profiles()[i].ProfileID == self.selectedProfileId()) {
                    return self.Profiles()[i];
                }
            }
            // in case there was no match, output a blank Profile
            return [{
                    StartDate : '',
                    EndDate : '',
                    ProfileID : '',
                    ProfileName : '',
                    ProjectName : '',
                    ReadingListID : '',
                    ReadingListName : ''
            }];
        },
        write: function(value) {
            self.selectedProfileId(value);
        },
        owner: self
    });
}

ko.applyBindings(new myViewModel());

HTML：

<table id="readingListApplyToProfile" class="fullWidthTable">
    <tr>
        <td>
            Profile:
        </td>
        <td>
            <select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID', value: getProfile "></select>
        </td>
    </tr>
    <tr>
        <td>
            End Date:
        </td>
        <td>
            <span data-bind="text: getProfile().ProfileName"></span>
        </td>
    </tr>
</table>

轮廓：
结束日期：

也许可以将select的值绑定到一个computedObservable，该值接受ProfileID并输出正确配置文件的ProfileName，然后将spans的文本绑定到同一个computedObservable，这可能会起作用，但我不想对所有属性都使用相同的代码，我希望有人能给我一个更好的解决方案。感谢是有意义的。这是一个完全的猜测，因为我不太擅长计算可观测值，但是否有可能输出整个Profile对象，并绑定到span上的特定属性？比如

data bind=“text:getProfile.ProfileName”

或者类似的东西？您有多少这样的下拉列表？这仅仅是一个下拉列表和一个范围吗？是的，这是一个下拉列表可能可以将select的值绑定到一个computedObservable，该值接收ProfileID并输出正确配置文件的ProfileName，然后将span的文本绑定到相同的computedObservable上，这可能会起作用，但我不想对所有属性执行相同的代码，我希望有人能给我一个更好的解决方案。感谢是有意义的。这是一个完全的猜测，因为我不太擅长计算可观测值，但是否有可能输出整个Profile对象，并绑定到span上的特定属性？比如

data bind=“text:getProfile.ProfileName”

或者类似的东西？您有多少这样的下拉列表？这只是一个下拉列表和一个跨度吗？是的，这是一个下拉列表

<table id="readingListApplyToProfile" class="fullWidthTable">
    <tr>
        <td>
            Profile:
        </td>
        <td>
            <select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID', value: getProfile "></select>
        </td>
    </tr>
    <tr>
        <td>
            End Date:
        </td>
        <td>
            <span data-bind="text: getProfile().ProfileName"></span>
        </td>
    </tr>
</table>