首页 文章

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

提问于
浏览 次
1

我有一个针对淘汰赛的bootstrap-multiselect Binders 的问题 . 我的数组的初始值未在下拉列表中设置为选中状态 .

贝娄是我如何使用数据绑定的索引：

<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

twitter-bootstrap knockout.js multi-select

1 回答

  • 2

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

    要使其工作，您需要创建一个初始化小工具的custom ko binding handler，并在必要时进行更新 . RP Niemeyer为不同的jQuery小工具提供了很好的 Binders 实现 . 您可以看一下：http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html，您可以在其中找到自定义 Binders 的一个很好的解释，以及使用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() }" />

    如您所见，您需要初始化小工具，处置小工具，并在您的observable发生更改时通知它 .

    回复于

相关问题