淘汰赛：无法处理绑定答案

【问题标题】：Knockout: Unable to process binding淘汰赛：无法处理绑定
【发布时间】：2014-11-29 10:29:09
【问题描述】：

我之前问过这个问题，但没有得到答案。

我在运行代码时收到此错误消息：

Uncaught ReferenceError: Unable to process binding "visible: function (){return !editable() }"
Message: editable is not defined

可编辑功能应该切换真/假，然后在按下按钮时切换到编辑模式。这个按钮是通过 html 中的 foreach 调用的，所以我猜它与我的视图模型有关。我从 getJson 获得的输出工作正常，但可编辑函数以某种方式发生冲突。

这是我的html代码：

<div><ul data-bind="foreach: comments">
  <li class="ul3">
     <span class="author" data-bind="text: nickname, visible: !editable(), click: editComment">
    </span>
     <input type="text" data-bind="value: nickname, visible: editable()"/>:
     <div>  

     <span class="comment" data-bind="text: newMsg, visible: !editable(), click: editComment">    
     </span>
     <textarea class="myComment" type="text" data-bind="value: newMsg, visible: editable()">                       
    </textarea>

    </div>
     <button data-bind="click: editComment, text: editable() ? 'Save' : 'Edit comment'">           
     </button> 
     <button data-bind="click: deleteComment">Delete</button>
          </li>
       </ul>
    </div>

这是我的 javascript：

      function Comment() {
    var self = this;
    self.nickname = ko.observable();
    self.newMsg = ko.observable();
    self.editable = ko.observable(false);

    self.sendEntry = function () {
     vm.selectedComment(new Comment());

        if (self.newMsg() !== "" && self.nickname() !== "") {

            $.post(writeUrl, "entry=" + ko.toJSON(self));
            self.newMsg("");
        }
        vm.cSection().getNewEntries();
    };
    self.deleteComment = function () {
        vm.comments.remove(self);
    };

     self.editComment = function () {
        self.editable(!self.editable());
    };
}
function commentSection() {
    var self = this;
    self.timestamp = 0;
     var entry;
    self.getNewEntries = function () {

        $.getJSON(readUrl, "timestamp=" + self.timestamp, function (comments) {
            for (var i = 0; i < comments.length; i++) {
                 entry = comments[i];
                if (entry.timestamp > self.timestamp) {
                    self.timestamp = entry.timestamp;
                }
                vm.comments.unshift(entry);
            }
             self.getNewEntries();
        });
    };

}

function ViewModel(){
    var self = this;

    self.cSection=ko.observable(new commentSection());
    self.comments = ko.observableArray();
    self.selectedComment = ko.observable(new Comment());

    //self.cSection().getNewEntries();
}
var vm=new ViewModel();
ko.applyBindings(vm);
vm.cSection().getNewEntries();

});

【问题讨论】：

editable is not defined 在我看来像是一个范围问题。您尝试使用 $root.!editable() 。如果能设置一个小提琴就更好了
请压缩你的代码。三行 HTML 和几行 JavaScript 足以说明问题；帮您的开发人员伙伴一个忙，并尽可能少地给他们不相关的东西。如果你删除一些东西，它也可以帮助你更清楚地看到，可能直到你自己看到错误。真的是在调试 101。

标签： javascript jquery knockout.js

【解决方案1】：

我用你的代码做了一些东西，现在切换工作正常。

请找到这个Working Fiddle

查看：

<input type="button"
    data-bind="click: editComment, value:editable() ? 'Save' : 'Edit comment'" />

查看模型：

$(document).ready(function() {
    vm = function ViewModel() {
        var self = this;
        self.comments = ko.observableArray();
        function Comment() {
            var self=this;
            self.editable = ko.observable(false);
            self.editComment = function() {
                self.editable(!self.editable());
            };
        }
        self.comments.push(new Comment());  
    };
    ko.applyBindings(new vm);
});

如果问题仍然存在，请使用上面的小提琴并尝试在其中构建您的代码让我知道。

【讨论】：