Question

我有一个表有四列，即代码，名称，数量和价格。其中，我想动态更改Quantity列的内容/元素。通常，它应该显示元素中显示的数量，当用户点击元素时，我想显示元素，以便用户可以编辑数量。我试图按照＆＃34;示例2＆＃34;在这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);
    }
}

在我的 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>

使用上面的代码，当我点击表格的数量栏中的span元素时，＆＃34;编辑＆＃34;调用函数和＆＃34; IsEditing＆＃34; value设置为true但我在单元格中看不到输入元素。单击span元素后，如果我使用＆＃34; Inspect Element＆＃34;查看html，我仍然可以看到该元素，而不是在我的视图中的屏幕上，我既看不到span也没有输入元素。

这是非常简单的逻辑并按预期执行，但视图上的最终结果不符合预期。任何人都可以帮助我发现上述代码有什么问题吗？

Answer 1

这个问题很棘手。这是因为span 不是一个自闭元素。这将有效：

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

这是一个完整的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

请记住，同样适用于div元素，不要以自我关闭的方式使用它们，否则Knockout会在您最不期望的时候欺骗您。

使用knockout动态显示/隐藏元素

1 个答案: