показать/скрыть элементы динамически с помощью нокаута

Question

У меня есть таблица, которая имеет четыре столбца, а именно: код, имя, количество и цену. Из этого я хочу динамически изменять содержание/элемент столбца Количество. Обычно он должен показывать элемент с количеством, отображаемым в нем, и когда пользователь нажимает на элемент, я хочу показать элемент, чтобы пользователь мог редактировать количество. Я пытаюсь реализовать согласно «Пример 2» на этом knockout documentation link.

Ниже мой код:

Page ViewModel

function OrderVM (vm) { 
    var self = this; 
    self.OrderNo= ko.observable(vm.OrderNo()); 
    ..... 
    ..... 
    self.OrderedProducts = ko.observableArray([]); 
    for (i = 0; i < vm.OrderedProducts().length; i++) { 
     var p = new ProductVM(vm.OrderedProducts()[i]); 
     self.OrderedProducts.push(p); 
    } 
    ..... 
} 

function ProductVM(vm) { 
    var self = this; 

    self.Code = ko.observable(vm.Code()); 
    self.Name = ko.observable(vm.Name()); 
    self.Quantity = ko.observable(vm.Quantity()); 
    self.Price = ko.observable(vm.Price()); 
    self.IsEditing = ko.observable(false); 

    this.edit = function() { 
     self.IsEditing(true); 
    } 
} 

На мой взгляд Razor я следующий код:

<tbody data-bind="foreach:OrderedProducts"> 
<tr> 
    <td class="lalign"><span data-bind="text:Code"/></td> 
    <td class="lalign"><span data-bind="text:Name" /></td> 
    <td class="ralign" style="padding:1px!important;"> 
     <span data-bind="visible: !IsEditing(), text: Quantity, click: edit" 
      style="width:100%;float:left;text-align:right;padding-right:10px;" /> 
     <input data-bind="value: Quantity,visible:IsEditing,hasfocus:IsEditing" 
       style="width:100%;text-align:right;padding-right:10px;" /> 
    </td> 
    <td class="ralign rightbordernone" style="padding-right:20px!important;"><span data-bind="text:Price"/></td> 
</tr> 

С аб ove, когда я нажимаю элемент span в столбце «Количество» таблицы, вызывается функция «edit» и значение «IsEditing» равно true, но я не вижу элемент ввода, видимый в моей ячейке. После нажатия на элемент span, если я посмотрю на html, используя «Inspect Element», я все еще вижу элемент только и не на экране, на мой взгляд, я не вижу ни диапазона, ни элемента ввода.

Это очень простая логика и выполняется так, как ожидалось, однако конечный результат на вид не такой, как ожидалось. Может ли кто-нибудь помочь мне определить, что не так с кодом выше?

Answer 1

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

<td> 
    <span data-bind="visible: !IsEditing(), text: Quantity, click: edit"></span> 
    <input data-bind="value: Quantity, visible: IsEditing, hasfocus: IsEditing" /> 
</td> 

Вот полный дем:

function ProductVM(vm) { 
 
    var self = this; 
 

 
    self.Code = ko.observable(vm.Code()); 
 
    self.Name = ko.observable(vm.Name()); 
 
    self.Quantity = ko.observable(vm.Quantity()); 
 
    self.Price = ko.observable(vm.Price()); 
 
    self.IsEditing = ko.observable(false); 
 

 
    this.edit = function() { 
 
     self.IsEditing(true); 
 
    } 
 
} 
 

 
ko.applyBindings({ OrderedProducts: [new ProductVM({ 
 
    Code: function() { return 1; }, 
 
    Name: function() { return "Apples"; }, 
 
    Quantity: function() { return 10; }, 
 
    Price: function() { return 12.50; } 
 
})]})

span { padding: 5px; background: pink; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
(Click "10" e.g. the Quantity for demo.) 
 
<table> 
 
    <tbody data-bind="foreach: OrderedProducts"> 
 
    <tr> 
 
     <td><span data-bind="text:Code"></span></td> 
 
     <td><span data-bind="text:Name"></span></td> 
 
     <td> 
 
     <span data-bind="visible: !IsEditing(), text: Quantity, click: edit"></span> 
 
     <input data-bind="value: Quantity, visible: IsEditing, hasfocus: IsEditing" /> 
 
     </td> 
 
     <td><span data-bind="text:Price"></span></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

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