从 KnockoutJS viewModel 中获取值，然后在另一个 viewModel 上调用它？

Question

我已经阅读了一些关于基本 JavaScript 的其他问题，并且我知道要在两个函数中使用一个变量，您需要执行 return 或使变量成为全局变量（在函数之外）。

但我认为淘汰赛中的解决方案可能会更简单（或者，我的代码的整个结构已经完全关闭，我可以让它变得更好）。

基本上，这是我想要完成的：

<h4 data-bind="text: displayTheValue">The value should be displayed here</h4>

<select data-bind="options: htmlSelectSet, optionsText: 'theText', optionsValue: 'theValue', value: displayTheValue"></select>

<p><span data-bind:"text: charSymbol">I want to display a character here that is dependent on the choices of the dropdown above</span></p>

我有依赖 Knockout 生成内容的 HTML 模板。这是JS：

function thisViewModel() {
    var self = this;

    var num1 = numeral(35450).format('0,0'); //variables probably set by input?
    var num2 = numeral(2450).format('0,0');

    self.htmlSelectSet = [{
        theText: "alpha",
        theValue: num1
    }, {
        theText: "bravo",
        theValue: num2
    }];

    self.displayTheValue = ko.observable();
}

ko.applyBindings(new thisViewModel());

到目前为止，我所取得的成就是用项目填充下拉列表，并且 drdop down 的值显示在

<h4 data-bind="text: displayTheValue">

在漂亮的 numericsJS 库的帮助下，它被正确格式化为逗号数字（耶）。

现在，我想要实现的是，当用户在下拉列表中选择 alpha 时，

<span data-bind:"text: charSymbol"></span>

上面会输出“A”。

我是否为此创建另一个函数，这将取决于 theText 值？

我这样做了：

function setChar() {
    var self = this;
    if (thisViewModel().theText == "alpha") {
        showSymbol = "A";
    }
    if (thisViewModel().theText == "bravo") {
        showSymbol = "B";
    }
    else {
        currencySymbol = null;
    }

    self.showSymbol = ko.observable();
}

ko.applyBindings(new setChar());

See Fiddle

认为只创建一个调用 thisViewModel().theText 的函数会有所作为，但目前不起作用。

我会很感激任何提示。我不认为这太复杂了，但它让我很兴奋。

我还将欣赏有关如何构建和解决问题的提示（即使用多个函数更好还是简单地将所有内容放在一个函数中？）

---

(供参考：我的 JavaScript 技能是新手；很奇怪 - 为什么我要使用像 Knockout 这样的库，而平均而言，我在 JS 中所知道的最好的事情就是输出带有字符串字符数？我不知道，可能只是勇敢 :D 我最擅长的最后一门编程语言是在 Turbo C 中。但我会学习的！）

谢谢！

Answer 1

您可以使用computed observable。不需要有两个视图模型。

如果你有一个用于 firstName 的 observable，另一个用于 lastName，并且要显示全名？这就是计算的地方 observables 进来——这些函数依赖于一个或 更多其他 observables，并且会在任何时候自动更新 这些依赖关系发生了变化。

http://knockoutjs.com/documentation/computedObservables.html

首先通过删除optionsValue: 'theValue' 更改您的值绑定以将对象设置为displayTheValue 而不仅仅是值。

由于对象现在可以是未定义的，我们需要在文本绑定周围设置一些保护。如果它未定义，我们只需将文本设置为空字符串。我们也可以改用with 绑定：

<h4 data-bind="text: displayTheValue() ? displayTheValue().theValue : ''"></h4>

然后在您使用 : 而不是 = 时修复符号范围中的问题：

<span data-bind="text: charSymbol"></span>

现在进行计算。当 displayTheValue 时，计算函数将触发并返回相关值：

self.charSymbol = ko.computed(function () {
    if (self.displayTheValue()) {
        if (self.displayTheValue().theText == "alpha") {
            return "A";
        }
        if (self.displayTheValue().theText == "bravo") {
            return "B";
        }
    }
    return null;
});

http://jsfiddle.net/yku33mtq/1/