javascript - 从 Observables 计算的 Knockout.js CSS

Question

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

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 文本区域并进行更改(即添加和删除一个空间只是为了让它更新)。当其他两个可观察值中的任何一个发生变化时，如何自动更新 css 可观察值？或者是否有更好的方法来设置我的 CSS 功能？

Answer 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