javascript - Codemirror 和 Knockout 之间的集成

Question

我想实现一种行为:当我从组合框中选择特定模板时，代码镜像文本区域中会出现代码。请看我的 fiddle : http://jsfiddle.net/GEJsu/1/

    function Template(initialTemplate) {
        var self = this;
        self.name = ko.observable(initialTemplate);
        self.code = ko.computed({
            read: function () {
                return self.name().Code;
            },
            write: function (value) {

            },
            owner: this
        });
    }

Answer 1

我修复了你的代码。有很多无用的代码。因此，如果我删除了太多内容，请告诉我。

这是 View :

<select data-bind="options: availableTemplates,
                   value: selectedTemplate,
                   optionsText: 'Name'"></select>
<br />
<div data-bind="with: selectedTemplate">
    <textarea cols="60" rows="8" style="background: lightblue"
     data-bind="value: Code,
                codemirror: { 'lineNumbers': true, 'mode': 'javascript' }">
     </textarea>
</div>

和 View 模型:

// Overall viewmodel for this screen, along with initial state
function ValidationViewModel() {
    var self = this;
    self.selectedTemplate = ko.observable();

    // Non-editable data - would come from the server
    self.availableTemplates = [{
        Name: "Range Validation",
        Code: "var minValue = 'A';\r\nvar maxValue = 'Z';\r\n\r\nreturn (e.value >= minValue && e.value <= maxValue) \r\n   ? true \r\n   : 'this is all wrong!';"
    }, {
        Name: "DateTime",
        Code: "var newDate = new Date(e.value);\r\n\r\nif (newDate != 'Invalid Date')\r\n   return true; \r\n\r\nreturn 'value is not a valid dateTime';"
    }, {
        Name: "Decimal",
        Code: "if (e.value == null || e.value.length == 0)\r\n   return 'please, type something'; \r\n\r\nreturn isFinite(e.value);"
    }];


}

See Fiddle

希望对您有所帮助。