Knockout: Unable to process binding

Question

I asked this question earlier but did not get an answer.

I get this error message when I run my code:

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

the editable function is supposed to toggle true/false and then switch to edit mode when a button is pressed. This button is called through a foreach in the html so i'm guessing it has something to do with my viewmodel. The output I get from my getJson works fine but the editable function conflicts somehow.

Here is my html code:

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

And here is my 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 seems to me like a scope issue . you tried using $root.!editable() . if can setup a fiddle it will be much better — super cool
Please condense your code. Three lines of HTML and a few lines of JavaScript are enough to demonstrate the issue; do your fellow developers a favor and give them as little irrelevant stuff as possible. It also helps yourself to see clearer if you remove things, possibly until you see the error on your own. That's debugging 101, really. — Tomalak

super cool super cool · Accepted Answer · 2014-10-04T18:30:12

I made it something from your code now toggle is working fine .

please find this Working Fiddle

View :

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

View Model:

$(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);
});

If issue still exists please make use of above fiddle and try to build your code in it let me know .

Knockout: Unable to process binding

1 Answers