Question

我希望<td>可见或不可见，具体取决于我的javascript中的布尔值。

我的HTML是：

<!-- ... -->
<tbody data-bind="foreach: entries">
    <tr>
        <td data-bind="visible: editable()">
            <a href="#" data-bind="click: $root.removeEntry">Remove</a>
        </td>  
    </tr>    
</tbody>
<!-- ... -->

我的Javascript就是这样：

//...
function TableEntryViewModel(){
    editable: ko.observable(false);
    //...
}

当它加载我的数据时，它只加载第一个条目然后停止。这是我得到的错误。

未捕获的TypeError：无法处理绑定＆＃34; visible：function（）{return editable（）}＆＃34;消息：字符串不是函数

这不是我的程序的完全复制品，但如果你做这项工作，我相信你会帮助我很多：http://jsfiddle.net/CuppleKay/S6Hwa/

Answer 1

好的，我可以从你的例子中看到你想要做什么。我在这里发布了一个修改版本：

http://jsfiddle.net/S6Hwa/2/

JavaScript的：

function TableEntryViewModel(){
    var self = this;

    self.editable = ko.observable(false);

    self.removeEntry = function (row) {
        self.entries.remove(row);
    };

    self.entries = ko.observableArray([
        {name: "Hendrik", vorname: "Alex", adresse: "Southstreet", wohnort: "South", id: "239"},
        {name: "Hendrik", vorname: "Alex", adresse: "Southstreet", wohnort: "South", id: "240"},
        {name: "Hendrik", vorname: "Alex", adresse: "Southstreet", wohnort: "South", id: "241"}
    ]);
}

var model = new TableEntryViewModel();

ko.applyBindings(model);

HTML：

...
<td data-bind="visible: $root.editable"><a href="#" data-bind="click: $root.removeEntry">Remove</a>    </td>
...

请注意，我需要将绑定更改为$root.editable。如果要逐行隐藏“删除”，请尝试稍微不同的版本：

http://jsfiddle.net/S6Hwa/3/

JavaScript的：

function TableEntryViewModel(){
    var self = this;

    self.removeEntry = function (row) {
        self.entries.remove(row);
    };

    self.entries = ko.observableArray([
        {name: "Hendrik", vorname: "Alex", adresse: "Southstreet", wohnort: "South", id: "239", editable: ko.observable(false)},
        {name: "Hendrik", vorname: "Alex", adresse: "Southstreet", wohnort: "South", id: "240", editable: ko.observable(false)},
        {name: "Hendrik", vorname: "Alex", adresse: "Southstreet", wohnort: "South", id: "241", editable: ko.observable(false)}
    ]);
}

var model = new TableEntryViewModel();

ko.applyBindings(model);

HTML：

...
<td data-bind="visible: editable"><a href="#" data-bind="click: $root.removeEntry">Remove</a>    </td>
...

请注意，因为observableArray中的每个条目都包含editable值，所以我们不再需要使用$root.。

希望有所帮助。

Answer 2

此语法不正确：

function TableEntryViewModel(){
    editable: ko.observable(false);
    //...
}

应该是

function TableEntryViewModel(){
    this.editable = ko.observable(false);
    //...
}
//...
ko.applyBindings(new TableEntryViewModel());

或者

var TableEntryViewModel = {
    editable: ko.observable(false),
    //...
}
//...
ko.applyBindings(TableEntryViewModel);

Answer 3

如果您未提供正确的上下文，则可能会发生此错误。您的<td>元素是否在KO foreach？

中

例如：

<table data-bind="foreach: items">
  <tr>
    <td data-bind="visible: editable()">
      <a href="#" data-bind="click: $root.removeEntry">Remove</a>
    </td>
  </tr>
</table>

在此示例中，foreach中的上下文为items，而不是父ViewModel。如果父ViewModel中存在editable，那么您需要提供如下所示的上下文：

<td data-bind="visible: $parent.editable()">

KnockoutJs可见不起作用

3 个答案: