javascript - 无法绑定(bind)列表框中选定的值

Question

我尝试创建一个双列表框，将项目从一个列表框移动到另一个列表框，然后最终将数据从列表传递回 Controller 。

作为一名 javascript 新手，我在数据绑定(bind)方面遇到了困难。为了将数据从一个列表框移动到另一个列表框，我创建了以下表单:

 <div class="container">
            <form role="form">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <div class="form-group">
                        <label for="SelectLeft">User Access:</label>
                        <select class="form-control" id="SelectLeft" multiple="multiple" data-bind="options : ownership, optionsText:function(item) { return item.FirstName + ' ' + item.LastName}, value:selectedItem">
                            @*<select class="form-control" id="SelectLeft" multiple="multiple">
                        </select>
                    </div>
                </div>   
                <div class="col-md-2">

                        <div class="btn-group-vertical">
                            <input class="btn btn-primary" id="MoveLeft" type="button" value=" << " data-bind="click: addItem" />
                            <input class="btn btn-primary" id="MoveRight" type="button" value=" >> " data-bind="click: removeSelected" />       
                        </div>

                </div>
                <div class="col-md-5">
                    <div class="form-group">
                        <label for="SelectRight">Owners:</label>
                        <select class="form-control" multiple="multiple" id="SelectRight" data-bind="options : availableOwners, optionsText:function(item) { return item.FirstName + ' ' + item.LastName}, value:selectedItem">
                        </select>
                    </div>
                </div>

            </div>                
        </div>
                <button type="submit" class="btn btn-default" value="Cancel" name="addEditUser" id="btnCancel" data-bind="click: cancel">Cancel</button>
                <button type="submit" class="btn btn-default" value="Submit" name="addEditUser" id="btnSubmit" data-bind="click: submit">Save</button>
    </form>
</div>

<script>
    var data=@(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
    var owners = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.AccessOwners));
    var availableOwners = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.owners));
    function viewModel() {
        this.username=ko.observable(data.Username);
        this.password=ko.observable(data.Password);
        this.email=ko.observable(data.Email);
        this.isActive=ko.observable(data.IsActive);
        this.userId = ko.observable(data.UserId);
        this.ownership=ko.observable(owners);
        this.availableOwners = ko.observable(availableOwners)
        this.selectedItem = ko.observable();

        this.submit = function()
        {
            $.ajax({
                url: '@Url.Action("UserSave", "Admin")',
                type: 'POST',
                data: ko.toJSON(this),
                contentType: 'application/json',
            });
            window.location.href = url;
            return false;
        }

        this.cancel = function()
        {
            window.location.href = url;
            return false;
        }

        this.addItem = function () {
            if ((this.selectedItem() != "") && (this.ownership.indexOf(this.selectedItem()) < 0))
            {
                // Prevent blanks and duplicates
                this.ownership.push(this.selectedItem());
                this.availableOwners.removeAll(this.selectedItem());
            }
            this.selectedItem(""); // Clear the text box
        };

        this.removeSelected = function () {
            if ((this.selectedItem() != "") && (this.availableOwners.indexOf(this.selectedItem()) < 0))
            {
                this.ownership.removeAll(this.selectedItems());
                this.availableOwners.push(this.selectedItem());
            }
            this.selectedItem("");
        };

        this.sortItems = function() {
            this.ownership.sort();
            this.availableOwners.sort();
        };
    };
ko.applyBindings(new viewModel());
var url = $("#RedirectTo").val();

当我点击 MoveLeft 或 MoveRight 按钮时，出现以下错误:

Uncaught TypeError: undefined is not a function 
    (anonymous function) 
    jQuery.event.dispatch 
    elemData.handle

有谁知道如何将选定的值从列表框传递到 addItem 或 removeItem 函数，以便在列表所有权中添加或删除对象？

谢谢!

Answer 1

嗯 niko 继续使用 Javascript，尤其是 ko 会很有趣

我 fork 了你们中的一些代码，以便让你们更好地理解事情。

除了亲爱的 Wayne Ellery 提到的原因之外，您还缺少一些东西，例如您必须使用 selectedOptions 当有机会选择多个列表项时

您给我们的错误 undefined is not a function 是因为您正在选择多个列表项并尝试推送它，这并不完全是 ko Push 的工作方式，而不是您必须循环并执行它。

在此处检查选定选项 Documentation

有一把 fiddle 总是好的。我们来检查一下工作 fiddle here

不需要像您为click给出的那样执行额外的逻辑，它可以以简单可读的方式完成 fiddle 中提供的所有内容

查看模型:

    var vm=function() {
    var self=this;
    //observable's declaration    

    self.addItem = function () {
    ko.utils.arrayForEach(self.selectedItem1(),function(item){
    self.availableOwners.push(item);
        self.ownership.remove(item);
    });
    }

    self.removeSelected = function () {
    ko.utils.arrayForEach(self.selectedItem2(),function(item){
    self.ownership.push(item);
    self.availableOwners.remove(item)
    });
    };

};
ko.applyBindings(new vm());

查看:

<select  multiple="multiple" data-bind="options : ownership, optionsText:function(item) { return item.FirstName() + ' ' + item.LastName()}, selectedOptions:selectedItem1"></select>

 <input class="btn btn-primary" id="MoveLeft" type="button" value=" << " data-bind="click:removeSelected,enable:selectedItem2"  />

如有任何问题请联系我们。