Question

我有两个observable，一个指定模块名称，另一个指定一些子节点的高度。我正在尝试制作一个自定义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 observable？或者有更好的方法来设置我的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

从Observables计算的Knockout.js CSS

1 个答案: