Question

在我的knockoutjs视图中，我想通过代码设置一些可观察的语句，而不是在html中声明它。

让我们说，在HTML中我可以这样做：

<div data-bind="style: { color: someValue() >= 0 ? '' : 'red' }"></div>

其中someValue（）在viewModel中是可观察的。每当someValue（）更改时，将执行规则并自动更改元素的颜色。一切都好，它有效。

但我想在代码中配置该规则，而不是在html中。我想要这样的东西（概念只是一个样本）：

<div data-bind="style: style"></div>
<script>
var viewModel =
{
    style: someValue() >= 0 ? '' : 'red' //<-- how make it observable?
}
</script>

注意到它只是被评估，样式将存储''或'红色'。不是我想要获得的。我希望它被评估为someValue（）更改，超级简单，就像html方式一样。

好吧，我不知道计算方法是否合适，但由于html模式非常简单，也许通过代码可以快速完成此任务。

有吗？

Answer 1

这是Exception in component tBigQueryInput_4 com.google.api.client.googleapis.json.GoogleJsonResponseException: 404 Not Found { "code" : 404, "errors" : [ { "domain" : "global", "message" : "Not found: Table rand-cap:_f000fcf374688fc5e7da50a4c0c04ba228d993c3.anon0849eba05949a62962f218a0433d6ee82bf13a7b", "reason" : "notFound" } ], "message" : "Not found: Table rand-cap:_f000fcf374688fc5e7da50a4c0c04ba228d993c3.anon0849eba05949a62962f218a0433d6ee82bf13a7b" }和ko.computed的用途：

ko.pureComputed

var someValue = ko.observable(0);

// All observables used in a computed will trigger changes
var style = ko.computed(function() {
  return someValue() > 0 ? 'not-red' : 'red';
});

// Log if it is actually observable:
console.log(ko.isObservable(style));

// Log its initial value
console.log(style());

// Subscribe to changes in our computed
style.subscribe(function(newValue) {
  console.log(newValue);
});

// Changing one of the computed's dependencies will result
// in the subscription being triggered and a log to console
someValue(2);

Answer 2

在视图模型中使用以下内容。

    self = this;
    self.someValue = ko.observable(1); // default observable's value
    self.changeRed = function () {
        return someValue() >= 0 ? '' : 'red';
    };

您的HTML代码如下。

<div data-bind="style: { color: changeRed() }"></div>

每当您更新您的observable时，例如在您的视图模型中调用self.someValue(-1);，您的浏览器将反映更改。

<强>更新

我无法看到您的代码库，但是如果没有特定的理由使用内联样式，我可能会将其更改为使用CSS类。

在viewModel中设置可观察语句

2 个答案: