Verwenden von jqAutocomplete in einem Array

Question

Ich verwende das jqAutocomplete-Plugin, das ich in einer Reihe einer Tabelle verwenden möchte.

Ich kann es nicht zum Laufen bringen. Die Autovervollständigungs-Auswahlbeschriftungen werden nicht angezeigt. Es erlaubt mir nur 1 Buchstaben einzugeben.

Ich verwende Knockout-Mapping, um serverseitige Viewmodels zu clientseitigen Viewmodels zuzuordnen.

Die Seite wird in Ordnung wiedergegeben. Für ein neues Formular - wie in diesem Fall - erzeugt der Code 10 leere Zeilen (nicht anzeigen). Ich möchte die automatische Vervollständigung verwenden, um einen Vertrag aus einer Liste für die JobName-Spalte auszuwählen.

Ich habe hier die Viewmodals kopiert, reduziert um es einfacher zu machen;

Eltern Viewmodel:

public class WholeViewModel : BaseViewModel 
{ 
    public WholeViewModel(int employeeId, string name;) 
     : base() 
    { 
     this.Lines = new List<LineViewModel>(); 
     this.Contracts = SessionObjectsSTAS.GetContracts().Select(x => new ContractViewModel { ContractId = x.ContractId, JobName = x.JobName, Label = x.ToString() }).ToList(); 
     this.EmployeeId = employeeId; 
     this.Name = name; 
    } 

    public int EmployeeId { get; set; } 
    public string Name { get; set; } 
    public List<ContractViewModel> Contracts { get; set; } 
} 

Die Linien Sammlung aus dieser viewmodal gemacht wird:

public class LineViewModel 
{ 
    public LineViewModel() 
    { 
    } 

    public LineViewModel(int key) 
     : this() 
    { 
     this.Id = key; 
     this.JobName = string.Empty; 
     this.Description = string.Empty; 
    } 

    public int Id { get; set; } 
    public int? ContractId { get; set; } 
    public string JobName { get; set; } 
    public string Description { get; set; } 
} 

The ContractViewModel:

public class ContractViewModel 
{ 
    public int ContractId { get; set; } 
    public string JobName { get; set; } 
    public string Label { get; set; } 
} 

So meiner javascript:

var lineMapping = { 
    'Lines': { 
     key: function (line) { 
      return ko.unwrap(line.Id); 
     }, 
     create: function (options) { 
      return new LineViewModel(options.data); 
     } 
    } 
}; 

LineViewModel = function (data) { 
    var self = this; 
    ko.mapping.fromJS(data, lineMapping, self); 
}; 

WholeViewModel = function (data) { 
    var self = this; 
    ko.mapping.fromJS(data, lineMapping, self); 
}; 

und meine ASP.Net Razor Seite:

@using Newtonsoft.Json 
@model ViewModel.WholeViewModel 
@{ 
    var data = JsonConvert.SerializeObject(Model); 
} 
    <table class="table"> 
     <tbody data-bind="foreach: Lines"> 
      <tr> 
       <td> 
        <input type="text" 
          data-bind="jqAuto: { source: $parent.Contracts, value: JobName, labelProp: 'Label', inputProp: 'Label', valueProp: 'ContractId' }" /> 
       </td> 
       <td> 
        <input type="text" data-bind="value: Description" /> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
@section scripts 
{ 
    @Scripts.Render("~/bundles/BootstrapJs") 
    @Scripts.Render("~/bundles/jqueryui") 
    @Scripts.Render("~/bundles/inputmask") 
    @Scripts.Render("~/bundles/Knockout") 
    <script type="text/javascript"> 
     var wholeViewModel = new WholeViewModel(@Html.Raw(data)); 
     ko.applyBindings(wholeViewModel); 
    </script> 
} 

Wenn ich einen Haltepunkt in Visual Studio gesetzt, die LineViewModel sieht wie folgt aus;

Answer 1

ein globales Variable Daten verwenden, um die Quelle direkt zu binden.

<script type="text/javascript"> 
    var data = @Html.Raw(data); 
    var wholeViewModel = new WholeViewModel(data); 
    ko.applyBindings(wholeViewModel); 
</script> 

Es gibt einen kleinen Fehler bei der Zuordnung der untergeordneten Linien. Zuweisen der Knockout documentation itself.

var LineViewModel = function(data) { 
    ko.mapping.fromJS(data, {}, this); 
} 

Beachten Sie, dass die untergeordneten Objekte einem leeren Objekt und nicht einem lineMapping-Objekt zugeordnet sind. Diese Objekte sind Teil von LineViewModel, das wiederum in lineMapping an das Lines-Array angehängt wird.

Der Wert sollte ContractId sein. Quelle sollte data.Contracts sein.

<input type="text" 
     data-bind="jqAuto: { 
     source: data.Contracts, 
     value: ContractId, 
     labelProp: 'Label', 
     inputProp: 'Label', 
     valueProp: 'ContractId' 
     }" 
/>