Javascript 淘汰赛：无法处理绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26194616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout: Unable to process binding
提问by Scatman_John
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.
可编辑功能应该切换真/假，然后在按下按钮时切换到编辑模式。这个按钮是通过 html 中的 foreach 调用的，所以我猜它与我的视图模型有关。我从 getJson 获得的输出工作正常，但可编辑函数以某种方式发生冲突。
Here is my html code:
这是我的 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>
And here is my javascript:
这是我的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();
});
采纳答案by super cool
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 .
如果问题仍然存在，请使用上面的小提琴并尝试在其中构建您的代码让我知道。
