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

Question

我读过一些关于基本 JavaScript 的其他问题，我知道要在两个函数中使用一个变量，您需要执行 return 或使变量成为全局变量（在函数之外).

但我认为 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>

我有 HTML 模板，它依赖于 Knockout 来生成内容。这是 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。不需要有两个视图模型。

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'.

更改您的值绑定以将对象设置为 displayTheValue 而不仅仅是值

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

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

然后在您使用 : 而不是 =:

时解决符号跨度中的问题

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

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

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/

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

Taking values from a KnockoutJS viewModel and then call it on another viewModel?

javascript

jquery

mvvm

knockout.js