Javascript KnockoutJs不可见'；行不通

我希望

根据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>
<!-- ... -->

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

未捕获类型错误：无法处理绑定“可见：函数（）{return editable（）}”消息：字符串不是函数

---

这不是我的程序的完全复制品，但如果你能做到这一点，我相信你会帮我很多忙：

此语法不正确：

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

应该是

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

或

---

如果未提供正确的上下文，则可能发生此错误。您的

元素是否在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>

---

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

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

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:

HTML:

。。。
...

请注意，因为ObservalArray中的每个条目都包含一个可编辑的值，所以我们不再需要使用

$root.

---

希望能有帮助。

事实上，我不认为这是怎么回事。看见括号是否存在似乎没有什么区别。我认为OP需要提供一个示例……这两个示例都没有帮助@GôTô@CuppleKay我更新了以显示

applyBindings

方法，也许这会有所帮助。否则你能提供更多的代码吗？@CuppleKay。我更改了editable上的绑定（添加了$root，因为它位于foreach绑定中），用我的答案中的内容更改了editable的声明，并添加了ko。applyBindingsI尝试复制此绑定，并成功地隐藏了TD。也就是说，我无法重现您的问题。您能够提供问题的简单JSFIDLE复制吗？查看控制台输出，您可能会看到一个错误-无法绑定“editable（）”。GoTo是正确的，您的“可编辑”值前面必须加上“this.”才能使绑定可见。@Paul实际上发生了一个错误抱歉：未捕获类型错误：无法处理绑定“可见：函数（）{return editable（）}”消息：字符串不是预期的函数。你能把你的问题快速简化并编辑你的问题来添加一个链接吗？凯，这样应该可以。如果在

上面有更多类似于cshtml的循环，那么请更新代码。先生，您是英雄！非常感谢你的帮助。现在一切似乎都很好：）@CuppleKay别担心。我怀疑您的下一步是将name、vorname和adrese（等）变成可观察对象，以便您可以在HTML中编辑它们，并将更改返回到您的模型中。：-）

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

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

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

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

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