Knockout.js observableArray和自动完成中的选定值

在过去的几年中，我没有使用knockoutjs，我忘记了一些关于映射的基本知识

我有一个数组，它应该保存从autocomplete中选择的值列表（JSON） 我已经创建了下一个代码：

 define(['jquery', 'knockout', 'koAutocomplete', 'mapBase','app/obj/routePoint'],
    function ($, ko, koAutocomplete, mapBase, routePoint) {
    return function routeBuilder() {
        var self = this;
        mapBase.initMap();
        self.rootPoints = ko.observableArray([new routePoint()]);
        self.addNewPoint = function () {
            self.rootPoints.push(new routePoint());
        };
        self.removePoint = function () {
            self.rootPoints.remove(this);
        };
        self.getOptions = function(searchTerm, callback) {
            $.ajax({
                dataType: "json",
                url: "/api/Geocoder",
                data: {
                    query: searchTerm
                },
            }).done(function (results) {                
                callback(mapBase.convertToAutoComplate(results));
            });
        }
    };
});

// Main viewmodel class
define(['knockout'],
    function (ko) {

        return function routePoint(label, locationId) {
            var self = this;     
            self.label = label;
            self.locationId = locationId;
            self.selectedData = ko.observable();
    };
});

<ul data-bind="foreach: { data: rootPoints, as: 'point' } ">
    <li>
        Name at position <span data-bind="text: $index"> </span>:
        <input placeholder="Start Type Name" 
               data-bind="jqAuto: { 
               value: $data.selectedData().label, 
               valueProp: '$data, 
               source: $parent.getOptions, 
               dataValue: $data,
               inputProp: 'label', 
               labelProp: 'label', 
               options: { minLength: 3 } }" />
        <a href="#" data-bind="click: $parent.removePoint">Remove</a>
    </li>
</ul>

define（['jquery'，'knockout'，'koAutocomplete'，'mapBase'，'app/obj/routePoint']，
函数（$、ko、koAutocomplete、mapBase、routePoint）{
返回函数routeBuilder（）{
var self=这个；
initMap（）；
self.rootPoints=ko.observearray（[newRoutePoint（）]）；
self.addNewPoint=函数（）{
self.rootPoints.push（newroutepoint（））；
};
self.removePoint=函数（）{
self.rootPoints.remove（此）；
};
self.getOptions=函数（searchTerm，回调）{
$.ajax({
数据类型：“json”，
url:“/api/Geocoder”，
数据：{
查询：searchTerm
},
}).done（函数（结果）{
回调（mapBase.converttoautosulate（results））；
});
}
};
});
//主视图模型类
定义（['knockout']，
职能（ko）{
返回函数routePoint（标签、位置ID）{
var self=这个；
self.label=标签；
self.locationId=locationId；
self.selectedData=ko.observable（）；
};
});


职位名称：

结果，我在ui上看到了我的选择，但rootPoints数组continence为空值。

---

如何将选定对象映射到特定数组索引？

看起来您正在使用jqAutocomplete库。从：

数据值-如果指定，此可观察值将填充 当前选定的数据项。此选项将允许您填充 使用valueProp设置值，并在 同时通过数据值

因此，要访问所选选项，首先需要一个可观察属性来存储它，然后将该可观察属性传递给dataValue绑定。我认为您需要在父视图模型上创建一个新的observable，并更改绑定选项以使用它

return function routeBuilder() {
    var self = this;
    mapBase.initMap();
    self.rootPoints = ko.observableArray([new routePoint()]);
    self.selectedPoint = ko.observable();
...       

<input placeholder="Start Type Name" 
       data-bind="jqAuto: { 
           source: $parent.getOptions,
           dataValue: $parent.selectedPoint,
...

返回函数routeBuilder（）{
var self=这个；
initMap（）；
self.rootPoints=ko.observearray（[newRoutePoint（）]）；
self.selectedPoint=ko.observable（）；
...       
mapBase.ConvertToAutoComplete返回什么？@JasonSpake routePoint对象列表如果在该函数中放置断点，它会被命中吗？是的，我看到一个选项列表，但如何将其映射到数组中的项（我的意思是在选择后，我希望在项列表根点选择routePoint）我现在明白了。我误解了你的问题。是的，你是对的，但我需要在根点上有self.selectedData。我在数组中有多达N个元素，每个元素都应该被选择。正如你所看到的，我在视图中有foreach，我没有意识到该属性被用于其他东西。现在呢？新的可观察对象称为selectedPoint