Question

使用Knockout和语义UI。我正在试图弄清楚如何为我的多选下拉列表选择值。第一个下拉列表只使用单个值，但多选一个剂量。我在另一个集合中有一个可观察的数组：

 <tbody id="tbodyelement" data-bind="foreach: groupUserCollection">
            <tr>
                <td>
                    <div class="ui selection dropdown fluid">
                        <input type="hidden" name="groupDD" data-bind="value: group.name">
                        <i class="dropdown icon"></i>
                        <div class="default text">Select Group</div>
                        <div class="menu" data-bind="foreach: $parent.groupCollection">
                            <div class="item" data-bind="text: $data.name(), attr: {'data-value': $data.id()}"></div>
                        </div>
                    </div>
                </td>

                <td>

                        <div class="ui multiple selection dropdown long-width" id="multi-select">
                            <div data-bind="foreach: user">
                                <input type="hidden" name="userDD" data-bind="value: firstLastName"> 
                            </div>
                            <div class="default text">Select User</div>
                            <div class="menu" data-bind="foreach: $parent.userCollection">
                                <div class="item" data-bind="text: $data.firstLastName(), attr: {'data-value': $data.id()}"></div>
                            </div>
                            <i class="dropdown icon"></i>
                    </div>
                </td>


            </tr>
        </tbody>

我有一个模型groupuser，其中包含一个组模型和一组角色。

var groupUser = function (data) {
    var self = this;
    self.group = ko.mapping.fromJS(data.group),
        self.user = ko.observableArray([]),         
        self.id = ko.observable(data.id),
        self.group.subscribe = function () {
            showButtons();
        },
        self.user.subscribe = function () {
          //  self.user.push(data.user);
            showButtons();
        }

};
 var group = function (data) {
    var self = this;
        self.id = ko.observable(data.id),
        self.name = ko.observable(data.name),
        self.project = ko.observable(data.project),
        self.projectId = ko.observable(data.projectId),
        self.role = ko.observable(data.role),
        self.roleId = ko.observable(data.roleId)                
};
    var user = function (data) {
    var self = this;
        self.id = ko.observable(data.id),
        self.accountId = ko.observable(data.accountId),
        self.email = ko.observable(data.email),
        self.firstName = ko.observable(data.firstName),
        self.lastName = ko.observable(data.lastName),
            self.firstLastName = ko.pureComputed({
             read: function()
            {
                return self.firstName() + " " + self.lastName();
            }
            ,
            write: function(value)
            {
                var lastSpacePos = value.lastIndexOf(" ");
                if (lastSpacePos > 0) { 
                    self.firstName(value.substring(0, lastSpacePos)); 
                    self.lastName(value.substring(lastSpacePos + 1)); 
                }
                console.log("firstname: " + self.firstName());
            }

        }),

};

  groupViewModel = {
    groupUserCollection: ko.observableArray(),
    userCollection: ko.observableArray(),
    groupCollection: ko.observableArray()
 }

我使用此功能添加数据：

$(data).each(function (index, element) {

                var newGroup = new group({
                    id: element.group.id,
                    name: element.group.name,
                    project: element.group.project,
                    projectId: element.group.projectId,
                    role: element.group.role,
                    roleId: element.group.roleId       
                });
                newGroup.id.subscribe(
                    function () {
                        newGroupUser.showButtons();
                    }
                );
                newGroup.name.subscribe(
                    function () {
                        newGroupUser.showButtons();
                    }
                );


                var newGroupUser = new groupUser({
                    group: newGroup,
                    id: element.id,

                });

                ko.utils.arrayForEach(element.user, function (data) {
                    var newUser = new user({
                        id: data.id,
                        accountId: data.accountId,
                        email: data.email,
                        firstName: data.firstName,
                        lastName: data.lastName,
                    });

                    newUser.id.subscribe(
                        function () {
                            newGroupUser.showButtons();
                        }
                    );
                    newUser.firstName.subscribe(
                        function () {
                            newGroupUser.showButtons();
                        }
                    );
                    newUser.lastName.subscribe(
                        function () {
                            newGroupUser.showButtons();
                        }
                    );
                    newGroupUser.user.push(newUser);
                });


                groupViewModel.groupUserCollection.push(newGroupUser);
            });

Answer 1

我最终在隐藏输入的数据绑定中添加了自定义绑定，并且它工作正常。但是现在我的订阅剂量在我添加值或删除它时起作用。有效的代码：

  ko.bindingHandlers.customMultiBind = {

    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.utils.arrayForEach(bindingContext.$data.user(), function (data) {
            if (element.value === "")
            {
                element.value = ko.utils.unwrapObservable(data.id)
            }
            else {
                element.value = element.value + "," + ko.utils.unwrapObservable(data.id)

            }
        });

    }
};

Knockout和Semantic UI多选下拉列表，其中预先选择的值与模型内的集合相对应

1 个答案: