Question

我有一个针对淘汰赛的bootstrap-multiselect绑定器的问题。我的数组的初始值未在下拉列表中设置为选中。

Bellow是我使用data-bind的索引：

<table class="table">
                    <thead>
                        <tr>
                            <th>@Resource.Name</th>
                            <th>@Resource.Group</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: ProjectsCollection">
                        <tr>
                            <td><input type='text' class='form-control' data-bind="value: ProjectCenterName"></td>
                            <td><select class="form-control" multiple="multiple" data-bind="options: $root.CompanyStructures, optionsText: 'CompanyStructureName', optionsValue: 'CompanyStructureId', selectedOptions: $data.ProjectCompanyStructures, multiselect: $root.multiSelectInitOptions"></select></td>
                            <td class="important">
                                <i class="fa fa-save" data-bind="click: $root.save"></i>
                            </td>
                            <td class="important">
                                <i class="fa fa-archive"></i>
                            </td>
                            <td class="important">
                                <i class="fa fa-trash"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>

我使用David Stutz创建的绑定处理程序，我的视图模型如下所示：

function GetProjects() {
    // Ajax Call Get All ProjectCenter Records for a specific Company in database
    $.ajax({
        type: "GET",
        url: "/api/ProjectCenterApi/GetProjectsForCompany",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            ko.mapping.fromJS(data.ProjectsCenterModels, {}, self.ProjectsCollection);
            self.CompanyStructures(data.CompanyStructures); // Put the response in ObservableArray
        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
    });
    // Ends Here
}

我读到'selectedOptions'需要是一个可观察的数组，这是检查过的，但即使如此，也不会选择这些值。

来自ajax调用的响应如下：

{"ProjectsCenterModels":
	[{"ProjectCenterId":1,
	"ProjectCenterName":
	"PnAweb",
	"ProjectCompanyStructures":
		[3]},
	{"ProjectCenterId":2,
	"ProjectCenterName":"Pna old",
	"ProjectCompanyStructures":
		[3,4]},
	{"ProjectCenterId":3,
	"ProjectCenterName":"Flint bugs",
	"ProjectCompanyStructures":
		[]}
	],
"CompanyStructures":
	[{"CompanyStructureId":3,
	"CompanyStructureName":"Not assigned"},
	{"CompanyStructureId":4,
	"CompanyStructureName":"Home"}
	]
}

我在foreach数据绑定表中有项目，我需要将项目链接到公司结构。保存时，所选公司结构会更新，这没关系，只显示初始值！有谁遇到过这种情况？ TNX

Answer 1

您希望使用带有ko的jQuery小工具使其自动运行，而这是不可能的。

要使其正常运行，您需要创建一个初始化小工具的custom ko binding handler，并在必要时进行更新。 RP Niemeyer为不同的jQuery小工具提供了很好的绑定器实现。您可以看一下：http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html，您可以在其中找到自定义绑定器的详细说明，以及使用jQuery UI日期选择器的示例：

ko.bindingHandlers.datepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    //initialize datepicker with some optional options
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);

    //handle the field changing
    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $(element).datepicker("destroy");
    });

  },
  //update the control when the view model changes
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).datepicker("setDate", value);
  }
};

您可以使用如下的绑定：

<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

如您所见，您需要初始化小工具，处理小工具，并在您的观察结果发生变化时通知它。

Knockout数据绑定for bootstrap multiselect不选择初始数据

1 个答案: