无法绑定列表框中的选定值

Question

我尝试创建一个双列表框来将项目从一个移到另一个，然后最终将列表中的数据传回控制器。

作为一个 javascript 新手，我正在努力处理数据绑定。为了将数据从一个列表框移动到另一个列表框，我创建了以下表格：

 <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

Observables 的一些小问题。

selectedItem 应初始化为空字符串：

this.selectedItem = ko.observable("");

所有权应该是一个 observableArray。

this.ownership=ko.observableArray(owners);

此处您需要使用this.ownership()

评估所有权

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

Answer 2

好吧 niko 继续 Javascript 会很有趣，尤其是与 ko

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

除了亲爱的 Wayne Ellery 提到的原因之外，还有一些你在这里遗漏的东西，比如你必须使用 selectedOptions 当有机会 select 多个列表项时

你给我们的错误 undefined is not a function 是因为你正在 select 多个列表项并试图推送它，这并不是 ko 推送的工作方式，你必须循环通过并做到这一点。

在此处查看 selectedOptions 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"  />

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

无法绑定列表框中的选定值

Unable to bind the selected value from listbox

javascript

asp.net-mvc

knockout.js