[英]Unable to bind the selected value from listbox
I tried to create a dual listbox to move items from one to another and then finally pass the data from lists back to controller. 我试图创建一个双重列表框,将项目从一个移到另一个,然后将数据从列表传递回控制器。
As a javascript newbie I am struggling with data binding. 作为一名JavaScript新手,我正在努力进行数据绑定。 To move the data from one listbox to another, I have created the following form: 要将数据从一个列表框移动到另一个列表框,我创建了以下表单:
<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();
When I hit the button MoveLeft or MoveRight, I get the following error: 当我按下按钮MoveLeft或MoveRight时,出现以下错误:
Uncaught TypeError: undefined is not a function
(anonymous function)
jQuery.event.dispatch
elemData.handle
Does anyone know how to pass the selected value from listbox to addItem or removeItem function in order to add or remove objects from the list ownership? 有谁知道如何将选定的值从列表框中传递给addItem或removeItem函数,以便从列表所有权中添加或删除对象?
Thanks! 谢谢!
well niko
its gonna be fun moving on with Javascript especially with ko niko
很好,继续使用Javascript会特别有趣,尤其是Ko
I forked some of you code to make things understandable to you in a better way . 我分叉了一些代码,使您可以更好地理解它们。
In addition to the reasons mentioned by dear Wayne Ellery
there are also few things you missing here like you have to use selectedOptions
when there is a chance to select multiple list items 除了亲爱的Wayne Ellery
( Wayne Ellery
提到的原因外,您在这里还缺少一些东西,例如,当有机会选择多个列表项时,您必须使用selectedOptions
The error you given us undefined is not a function
is because you are selecting multiple list items and trying to push it which is not exactly how ko
push works rather you have to loop through and do it. 您给我们undefined is not a function
的错误undefined is not a function
是因为您正在选择多个列表项并尝试推送它,这与ko
push的工作方式并不完全相同,而是您必须遍历并执行它。
Check here for selectedOptions Documentation 在此处查看选定的选项文档
Its always good to have a fiddle right. 拥有小提琴权总是一件好事。 Here we go check the working fiddle here 在这里,我们去检查工作小提琴这里
There is no need of doing additional logic as you given in for click
it can be done in simple readable way everything provided in fiddle 无需像click
给出的那样执行其他逻辑,就可以用简单易读的方式完成提琴中提供的所有内容。
View Model: 查看模型:
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());
View: 视图:
<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" />
Any issue on this get back to us . 关于此的任何问题都归给我们。
Some minor issues with observables. 可观察性的一些小问题。
selectedItem
should be initialised to empty string: selectedItem
应该初始化为空字符串:
this.selectedItem = ko.observable("");
ownership should be an observableArray. 所有权应该是一个observableArray。
this.ownership=ko.observableArray(owners);
Here you need to evaluate ownership using this.ownership()
在这里,您需要使用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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.