asp.net-mvc - 在数组中使用 jqAutocomplete

Question

我正在使用我想在表格的一行中使用的 jqAutocomplete 插件。

我无法让它工作。不会出现自动完成选择标签。它只允许我输入 1 个字母。

我正在使用 knockout 映射将服务器端 View 模型映射到客户端 View 模型。

页面呈现良好。对于一个新的表格 - 在这种情况下 - 代码产生 10 个空行(不显示)。我想使用自动完成功能从 JobName 列的列表中选择一个契约(Contract)。

我在这里复制了 View 模态，为了更容易理解而减少了；

父 View 模型:

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

Lines Collection 由以下 View 模式组成:

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

契约(Contract) View 模型:

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 Razor 页面:

@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

使用全局变量 data 直接绑定(bind)源。

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

映射 child ，线条有一个小错误。将其归因于 Knockout documentation itself .

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

请注意， child 被映射到一个空对象而不是 lineMapping 对象。这些对象是 LineViewModel 的一部分，它本身附加到 lineMapping 中的 Lines 数组。

该值应为 ContractId。来源应该是 data.Contracts。

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