observableArray和autocomplate

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> 

，結果我看到了我的選擇，在用戶界面，但rootPoints陣列可控空值。 如何將選定的對象映射到特定的數組索引？

Answer 1

它看起來像你正在使用jqAutocomplete庫。從documentation：

dataValue - 如果指定，這可觀測將與 當前選定的數據項進行填充。此選項允許您使用valueProp填充 值，並通過dataValue同時訪問 上的選定對象。

因此，要訪問選定的選項，首先需要一個observable屬性來存儲它，然後將該observable傳遞給dataValue綁定。我認爲你需要在父視圖模型上創建一個新的可觀察對象，並更改綁定選項以使用它。

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, 
...