Jal*_*ayn 8 javascript codemirror knockout.js
我想将CodeMirror JavaScript编辑器集成到KnockoutJS中.我知道还有Ace,但在我看来,使用CodeMirror会更容易.
我已经为JQueryUI小部件和QTip集成了自定义绑定,但这些是我在Internet上找到的代码片段,然后我只需要修改非常小的部分.
不幸的是,似乎我已经达到了我对Javascript的限制所以我在这里转向JavaScript Sith Masters.我不一定希望为我写的全部内容,指针和关于如何继续的建议会有很大的帮助.
我有一段代码:
HTML(我删除了textarea上已有的自定义绑定,这里没关系)
<body>
<textarea id="code" cols="60" rows="8"
data-bind="value: condition,
tooltip: 'Enter the conditions',
codemirror: { 'lineNumbers': true, 'matchBrackets': true, 'mode': 'text/typescript' }"></textarea>
</body>
CodeMirror的自定义绑定处理程序的开始:
ko.bindingHandlers.codemirror = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var options = valueAccessor() || {};
var editor = CodeMirror.fromTextArea($(element)[0], options);
}
};
目前,这不会产生JS错误,但会显示2个文本区域而不是1个.
那我接下来该怎么办？
之前发布的解决方案似乎有点过时，对我不起作用，所以我以有效的形式重写了它们：
// Example view model with observable.
var viewModel = {
fileContent: ko.observable(''),
options: {
mode: "markdown",
lineNumbers: true
}
};
// Knockout codemirror binding handler
ko.bindingHandlers.codemirror = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var options = viewModel.options || {};
options.value = ko.unwrap(valueAccessor());
var editor = CodeMirror(element, options);
editor.on('change', function(cm) {
var value = valueAccessor();
value(cm.getValue());
});
element.editor = editor;
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var observedValue = ko.unwrap(valueAccessor());
if (element.editor) {
element.editor.setValue(observedValue);
element.editor.refresh();
}
}
};
ko.applyBindings(viewModel);
作为<div data-bind="codemirror:fileContent"></div>附加到此的代码镜像的目标，将创建一个新的 codemirror 实例，并传入视图模型中的选项（如果已设置）。
[编辑] 我修改了 codemirror 绑定处理程序的更新方法，以解开传递的 valueAccessor，如果没有该行，当可观察对象更新时，敲除将不会触发更新方法 - 它现在可以按照您的预期工作。
| 归档时间： |
|
| 查看次数： |
2711 次 |
| 最近记录： |