使用挖空动态显示/隐藏元素 [英] show/hide elements dynamically using knockout

问题描述

我有一个表，该表有四列，分别是代码，名称，数量和价格.其中，我想动态更改数量"列的内容/元素.通常，它应该显示其中显示有数量的元素，并且当用户单击元素时，我想显示该元素，以便用户可以编辑数量.我正在尝试根据此淘汰文件文档链接上的示例2"来实施.

I have a table which has four columns namely Code, Name, Quantity and Price. Out of these, I want to change the content/element of Quantity column dynamically. Normally, it should show the element with quantity displayed in it and when user click on element, I want to show the element so user can edit the quantity. I'm trying to implement as per "Example 2" on this knockout documentation link.

以下是我的代码:

页面视图模型

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);
    }
}

在我的剃刀视图中，我有以下代码:

In my Razor view I have following code :

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

使用上面的代码，当我单击表的数量"列中的span元素时，将调用"edit"函数，并且"IsEditing"值设置为true，但是在单元格中看不到输入元素.单击span元素后，如果我使用"Inspect Element"查看html，我仍然只能看到该元素，而看不到，但在屏幕上看不到span或input元素.

With above code, when I click on span element in my Quantity column of table, "edit" function is called and "IsEditing" value is set to true but I don't see input element visible in my cell. After clicking on span element, If I look at the html using "Inspect Element", I can still see the element only and not but on screen in my view, I see neither span nor input element.

这是非常简单的逻辑，可以按预期执行，但是视图上的最终结果与预期不符.谁能帮助我检测上述代码出了什么问题?

This is very simple logic and executes as expected however final result on view is not as expected. Can anyone help me to detect what's wrong with above code?

推荐答案

问题很棘手.这是因为span不是 自闭元素.这将起作用:

The problem is tricky. It lies in the fact that span is not a self-closing element. This will work:

<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元素的用法相同，请不要以自动关闭的方式使用它们，否则当您最不期望时，Knockout会欺骗您.

Remember, the same holds for div elements, don't use them in a self-closing manner or Knockout will fool you when you least expect it.

这篇关于使用挖空动态显示/隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！