Невозможно связать выбранное значение из списка

Question

Я попытался создать двойной список для перемещения элементов из одного в другой, а затем, наконец, передать данные из списков обратно на контроллер.

Как новичок в javascript Я борюсь с привязкой данных. Для того, чтобы переместить данные из одного ListBox к другому, я создал следующий вид:

<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 особенно К.О.

Я раздвоенный некоторые из вас код, чтобы сделать вещи понятными вы в лучшем виде.

В дополнение к упомянутым причинам уважаемым Wayne Ellery также есть несколько вещей, которые вы здесь отсутствует, как вы должны использовать selectedOptions , когда есть возможность выбрать несколько элементов списка

Ошибка вы дали нам undefined is not a function происходит потому, что вы выбираете несколько элементов списка и пытаетесь нажать, что не совсем так, как ko push работает, а вам нужно перебирать и делать это.

Проверить здесь selectedOptions Documentation

всегда хорошо иметь скрипку право. Здесь мы идем проверить работу скрипку here

Там нет необходимости делать дополнительную логику, как вы дали в течение 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()); 

Вид:

<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" /> 

Любые проблемы с этим возвращаются к нам.

Answer 2

Некоторые незначительные проблемы с наблюдаемыми.

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