淘汰赛Js Visible不起作用

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

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

Uncaught TypeError：无法处理绑定“可见：function（）{return editable（）}”消息：字符串不是函数

这不是我的程序的精确副本，但是如果您能够完成这项工作，我相信您会为我提供很多帮助： 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()">