个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我想整合 CodeMirror JavaScript 编辑器到 KnockoutJS。我知道还有 Ace，但在我看来，使用 CodeMirror 会更容易。
我已经为 JQueryUI 小部件和 QTip 集成了自定义绑定(bind)，但这些是我在 Internet 上找到的代码片段，然后我只需要修改非常小的部分。
不幸的是，我似乎已经达到了 Javascript 的极限，所以我在这里求助于 JavaScript Sith Masters。我不一定想要为我写的整件事，关于如何继续的指示和建议会有很大帮助。
我的这段代码:
HTML(我删除了文本区域中已有的自定义绑定(bind)，它们在这里无关紧要)
<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 自定义绑定(bind)处理程序的开始:
ko.bindingHandlers.codemirror = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var options = valueAccessor() || {};
var editor = CodeMirror.fromTextArea($(element)[0], options);
}
};
目前，这不会产生 JS 错误，但会显示 2 个文本区域而不是一个。
那么接下来我该做什么呢？
最佳答案
之前发布的解决方案似乎有点过时并且对我不起作用，所以我以有效的形式重写了它们:
// 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>作为附加到此的代码镜像的目标将创建一个新的代码镜像实例并从 View 模型中传入选项(如果已设置)。
[edit] 我已经修改了 codemirror 绑定(bind)处理程序的更新方法以打开传递的 valueAccessor，如果没有该行，则在更新 observable 时不会触发更新方法 - 它现在可以作为你会期望它。
关于javascript - 如何将 CodeMirror 集成到 KnockoutJS 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13375612/
25
4
0
我已经使用 knockout js 实现了一个简单的 spa，您可以在其中在多个页面之间导航，每个页面都呈现一个 View 模型。菜单是一个 2 级菜单，因此我有主页面和子页面。我用knockout的
我想使用组件作为表格行模板，但似乎找不到方法，这可能吗？ 当我执行以下操作时，它不会将组件放在 tbody 中，而是将其放在表格上方。 组件 模板 最佳答案
我希望能够将单击和双击事件绑定(bind)到一段文本。我知道我可以使用 data-bind ="event: { dblclick: doSomething } 双击，但我还需要能够在单击时执行不同的
我是否可以告诉 knockout 映射插件订阅所有属性更改调用某个函数？ 我意识到我可以通过这种方式手动订阅属性更改事件: var viewModel = { name: ko.observa
我想要一个可见或不可见，具体取决于我的 javascript 中的 bool 值。 我的 HTML 是: Remove
我想将此 json 映射到自定义对象。问题是项目不是 typeof Item 对象而是普通对象。我在这里缺少什么？ 你可以在这里测试:http://jsfiddle.net/5jhpE/ var js
我有一个 self 描述的定义如下: var my_data = { types: { typeA: {fieldX: { type: "string"}}, typeB:
首先看一下: http://pastebin.com/823NMiWc 这是 Knckoutjs + Jquery Raty 插件 假设这些是数据库中的列: story_rev: ko.observa
我正在使用 knockout.js 并尝试设置我的选择绑定(bind)的默认值(不使用 optionCaption)，并在有人更改它时捕获该值。
我目前有一个数字框，用户可以在其中输入数字 1、2 或 3，并在此基础上设置一些条件格式。 但是，我希望数字字段成为一个下拉列表，其中显示“短”、“长”和“非常长”之类的内容，但在幕后，传递的实际值是
我正在寻找一些有关如何创建代表我的评论系统中的帖子的模型的指南。本质上，它是 Facebook 的简化版本，其中有不同用户的帖子，每个帖子都有零个或多个评论。亲子关系始终只有一层。 创建 Post 对
我需要为数组的每个元素计算一个可观察值。此计算可观察量的解析需要依赖于每个数组元素上下文中存在的其他属性。 请检查以下示例案例: 这是 KnockoutJS foreach 绑定(bind)到嵌套数组
我在网格中有一个嵌套的组产品选项数组。我想要一个弹出编辑器，列出每个分组产品选项的所有产品(产品选项行)，并允许用户检查它们之间的关系。我遇到过多对多关系的示例，但没有看到 self 引用分组多对多的
我正在使用KnockoutJs构建一个搜索列表，代码如下: HTML: 部分Js搜索功能: this.name = ko.observable(''); this.query = ko
我是 KnockoutJS 新手。我有一个按以下方式工作的应用程序: 加载页面时，复杂的数据结构会传递到前端 该数据结构被分成更小的 block ，这些数据 block 被传递给组件 用户与组件交互以
我有一个 ASP.Net MVC 网站，在 View 中使用 KnockoutJS 和 KOGrid。它动态地呈现某一特定列中的超链接，如下所示: cellTemplate: '' 已决定，单击时，浏
我正在使用javascript和knockoutjs来使用viewmodel实现搜索过滤器。我无法让搜索过滤器工作。下面是我的js文件 //Object Constructor Class for L
我使用 KnockoutJS 来创建工作申请网站，并使用 JS 中的 getJSON 方法。 不幸的是，我得到了这个结构: 办公室 纽约 部门 金融 职位 示例 ... IT 物流 营销 华盛顿 部门
我在这里创建了一个问题示例: http://jsfiddle.net/JustinN/qWeLT/1/ 我的实际代码已连接到 ASP.NET Web 方法，因此示例代码已调整为指向公共(public)
在过去的几天里，我对 Knockoutjs 越来越感兴趣。它看起来非常有前途，因为它对 MVVM 模式和 WPF 进行了类似绑定(bind)的建模，但每当它为非 RIA Web 应用程序带来一些有用的
我是一名优秀的程序员,十分优秀！