Knockout: Обновление до значения в текстовом поле не обновляет наблюдаемый элемент - PullRequest
Новая
       27

Knockout: Обновление до значения в текстовом поле не обновляет наблюдаемый элемент

0 голосов
/ 05 сентября 2018

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

Теперь есть кнопка добавления, которая помещает новый наблюдаемый элемент в наблюдаемый массив. Это отлично работает.

Но когда я редактирую значения в текстовом поле и ожидаю, что они изменятся в базовом наблюдаемом элементе, но этого не происходит.

Вот фрагмент кода для этого. 

 var InventoryViewModel = function() {
     var self = this;
     self.STockItems = ko.observableArray();

     InitializeStock(self);

     self.addItems = function(vm) {
         self.STockItems.push(new ko.observable(''));
     }
     self.ProcessInventory = function(vm) {
         console.log(vm.STockItems());
     };
 }

 var vm = new InventoryViewModel();
 ko.applyBindings(vm);


 function InitializeStock(context) {
     context.STockItems.push(new ko.observable('Item1'));
     context.STockItems.push(new ko.observable('Item2'));
 }
li {
    list-style: none;
    margin-top: 10px;
}

.info-text {
    margin-top: 30px;
}


    
        
                                                   
        

    

 + Add more







http://jsfiddle.net/xvza6nu2/1/



 Edit: 
Поскольку я нажимаю непосредственно на наблюдаемый объект, я полагаю, что мне не нужно создавать оболочку для перемещения элементов. 



function EditableField(initialValue) {
  this.value = ko.observable(initialValue);
}




 Если я должен использовать эту обертку, то почему? Какая разница? 












 



 

 





 




 





1 Ответ












0 голосов 























 / 

05 сентября 2018












 Наблюдаемые должны быть привязаны к свойству в модели представления, это единственный способ ссылаться на них из HTML.
$ data является ссылкой на контекст модели представления, а не на саму наблюдаемую. Так уж сложилось, что в вашем foreach контексте была только 1 наблюдаемая, поэтому выглядело, как будто ваша первоначальная установка работала.


 Читать все о контексте связывания  здесь . 



 Чтобы заставить его работать должным образом, вам нужно поместить объекты в ваш observableArray с именованными свойствами, на которые впоследствии будет ссылаться HTML. Каждый объект в массиве observableArray становится мини-моделью представления в цикле foreach. 



 Редактировать : 



    

  1.  Нет необходимости использовать new для создания на наблюдаемой. 
    2. 

  2. $root относится к первичной модели представления. Полезно использовать его, когда мы хотим сослаться на него из viewModel дочернего элемента / потомка. В вашем случае для ProcessInventory click это не нужно, поскольку мы уже находимся в основном контексте viewModel. 
    3. 




 




 var InventoryViewModel = function() {
     var self = this;
     self.STockItems = ko.observableArray();

     InitializeStock(self);

     self.addItems = function(vm) {
         self.STockItems.push({item : ko.observable('')});
     }
     self.ProcessInventory = function(vm) {
         console.log(vm.STockItems());
     };
 }

 var vm = new InventoryViewModel();
 ko.applyBindings(vm);


 function InitializeStock(context) {
     context.STockItems.push({item : ko.observable('Item1')});
     context.STockItems.push({item : ko.observable('Item2')});
 }


li {
    list-style: none;
    margin-top: 10px;
}

.info-text {
    margin-top: 30px;
}




    
        
                                                   
        

    

 + Add more















 
 

 





 

 



 


 

 

 


...