淘汰赛：如何通过属性名称从对象的observableArray中选择一项

Question

我正在通过开发一个小型应用程序来打印淘汰赛的第一步，该应用程序可打印有关选定人员的信息，问题是我不知道如何确切地根据特定属性从数组中选择一个对象。

在我的小提琴中，我需要打印有关我选择的人的所有信息，但这些人的名字不会出现在选择框中，它显示[Object Object]

我想获得想要的结果时缺少什么？

 var people = [{ name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" }, { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" }, { name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" }]; function ContactsViewModel(people) { var self = this; self.contacts = ko.observableArray(people); } ko.applyBindings(new ContactsViewModel(people)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div> Show me: <select data-bind="options: contacts"></select> </div> <div> Name: <span databind="text: name"></span><br> Adress: <span data-bind="text: address"></span><br> Tel: <span data-bind="text: tel"></span><br> Email: <span data-bind="text: email"></span><br> Type: <span data-bind="text: type"></span><br> </div> 

我的小提琴： http : //jsfiddle.net/VxT5Y/146/

Answer 1

使用选择选项文本数据绑定属性：

 <select data-bind="options: contacts,
                   optionsText: 'name',
                   value: selectedName,
                   optionsCaption: 'Choose...'"></select>

Answer 2

您需要一个可观察的对象来获取值并使用它在表单中显示。

[编辑]

如@Tomalak所建议

 var people = [{ name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" }, { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" }, { name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" }]; function ContactsViewModel(people) { var self = this; self.contacts = ko.observableArray(people); self.selectedPerson = ko.observable(); } ko.applyBindings(new ContactsViewModel(people)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <p>Show me: <select data-bind="options: contacts, optionsText: 'name', value:selectedPerson"></select> </p> <!-- ko with: selectedPerson --> Name: <p data-bind="text:name"></p> adress: <p data-bind="text:address"></p> tel: <p data-bind="text:tel"></p> email: <p data-bind="text:email"></p> type: <p data-bind="text:type"></p> <!--/ko -->