从 Observables 计算的 Knockout.js CSS答案

【问题标题】：Knockout.js CSS Computed From Observables从 Observables 计算的 Knockout.js CSS
【发布时间】：2014-01-03 08:21:46
【问题描述】：

我有两个可观察对象，一个指定模块名称，另一个为其某些子对象设置高度。我正在尝试制作一个自定义的 css 计算 observable，其中包括这两个 observable，如下所示：

self.moduleId = ko.observable('dbm-name');
self.slideWidth = ko.observable(75);
self.css = ko.observable('');
self.setcss = ko.computed({
    read: function() {
        return '#' + self.moduleId() +
               ' {\n\tbackground: #fff;\n\tcolor: #000;\n}
                  \n.cont_width {\n\twidth: ' + self.slideWidth() +
               '%;\n}';
    },
    write: function(value) {
        self.css(value);
        return value;
    }
});

但它也应该允许用户手动编写/编辑一些 css。问题是一旦moduleId 或slideWidth 更改，css observable 不会更新，除非用户进入自定义css textarea 并进行更改（即添加和删除空格只是为了让它更新）。当其他两个可观察值中的任何一个发生变化时，如何自动更新 css 可观察值？或者有没有更好的方法来设置我的 css 功能？

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

您可以指定读取函数来设置您的 css：

self.setcss = ko.computed({
        read: function() {
            var _css = '#' + self.moduleId() +
                '{\n\tbackground: #fff;\n\tcolor: #000;\n}' +
                '\n.cont_width {\n\twidth: ' + self.slideWidth() +
                '%;\n}';
            self.css(_css);       
        },
        write: self.css
 });

但是像这样，您只能将其中一个值作为您的 css，无论是用户键入的 css 还是计算的产品，在每个时刻。

但我想您可以修改读取的方式，即连接值以在您已有的 css 末尾添加新的值。

here is a working fiddle

【讨论】：