配列内でのjqAutocompleteの使用

Question

テーブルの行内で使用するjqAutocompleteプラグインを使用しています。

私はそれを動作させることができません。オートコンプリート選択ラベルは表示されません。 1文字入力するだけです。

ノックアウトマッピングを使用して、サーバー側のビューモデルをクライアント側のビューモデルにマップしています。

ページがきれいにレンダリングされます。新しいフォームの場合（この場合のように）、コードは10個の空行を表示します（表示しません）。 JobName列のリストから契約を選択するためにオートコンプリートを使用したいと思います。

私はビューモダールをここにコピーしました。

親の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; } 
} 

行コレクションがこのviewmodalで構成されています

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; } 
} 

ContractViewModel：

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

だから私の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); 
}; 

と私のASP.Netカミソリのページ：

@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> 
} 

私はVisual Studioでブレークポイントを設定すると、LineViewModelは次のようになります。

Answer 1

直接ソースをバインドするために、グローバル変数のデータを使用してください。

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

子供、行のマッピングに小さな誤差があります。それをKnockout documentation itselfに帰する。

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

子は、空のオブジェクトにマップされ、lineMappingオブジェクトにはマップされないことに注意してください。これらのオブジェクトはLineViewModelの一部であり、LineViewModel自体がlineMappingのLines配列にアタッチされます。

値はContractIdである必要があります。ソースはdata.Contractsでなければなりません。

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