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() +
               ' {ntbackground: #fff;ntcolor: #000;n}
                  n.cont_width {ntwidth: ' + self.slideWidth() +
               '%;n}';
    },
    write: function(value) {
        self.css(value);
        return value;
    }
});

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

Answer 1

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

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

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

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

这是一个工作小提琴