从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文本区域并进行更改（即添加和删除空格以使其更新），否则css observable不会更新。 当其他两个可观察值之一更改时，如何自动更新可观察的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末尾添加新值。

这是一个工作的小提琴