Question

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

我有一个数组应该保留从自动完成中选择的值列表（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>

因此我看到了我的选择，在ui但是rootPoints数组控制空值。如何将所选对象映射到特定的数组索引？

Answer 1

看起来你正在使用jqAutocomplete库。来自documentation：

dataValue - 如果指定，则此可观察量将填充当前选择的数据项。此选项将允许您填充使用valueProp的值，并且可以访问所选对象同时通过dataValue。

因此，要访问所选选项，首先需要一个observable属性来存储它，然后将该observable传递给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,
...

observableArray和autocomplate中的选定值

1 个答案: