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

Question

我读过一些关于基本 JavaScript 的其他问题，我知道要让一个变量在两个函数之间可用，您需要执行返回或使变量成为全局变量(在函数之外)。

但我认为 knockout 中的解决方案可能更简单(或者，我的代码的整个结构完全不对，我可以让它变得更好)。

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

<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 的值显示在 to

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

在漂亮的 numeralsJS 库的帮助下，它被正确地格式化为逗号数字(Yay)。

现在，我想要实现的是，当用户在下拉菜单中选择 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 中最好的事情是输出“Hello Word”字符串字符数？我不知道，可能只是勇敢 :D 我上一次非常擅长的编程语言是在 Turbo C 中。但我会学习的!)

谢谢!

Answer 1

你可以使用一个computed observable。不需要有两个 View 模型。

What if you’ve got an observable for firstName, and another for lastName, and you want to display the full name? That’s where computed observables come in - these are functions that are dependent on one or more other observables, and will automatically update whenever any of these dependencies change.

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

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

由于对象现在可以是未定义的，我们需要对文本绑定(bind)进行一些保护。如果它是未定义的，我们将把文本设置为空字符串。我们也可以使用 with改为绑定(bind):

<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/