从 KnockoutJS 视图模型中获取值，然后在另一个视图模型上调用它

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

本文关键字：视图 模型 另一个 调用 然后 KnockoutJS 获取      更新时间：2023-09-26

我读过一些关于基本JavaScript的其他问题，我知道要在两个函数中有一个变量可用，你需要做一个返回或使变量全局（在函数之外）。

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

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

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

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

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

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

那里将输出"A"。

我是否为此制作另一个函数，该函数将取决于文本值？

我这样做了：

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());

见小提琴

认为只是创建一个调用thisViewModel（）.theText的函数会做一些事情，但目前不起作用。

我会感谢任何形式的提示。 我不认为这太复杂，但它让我吃泡菜。

我还会感谢有关如何构建和处理问题的提示（即使用多个函数更好，或者简单地将所有内容放在一个函数中？

（供参考：我的 JavaScript 技能是新手;很奇怪 - 为什么我要敲打像 Knockout 这样的库，而平均而言，我在 JS 中知道的最好的事情是输出带有字符串字符数的"Hello Word"？我不知道，可能只是勇敢:D 我非常擅长的上一种编程语言可以追溯到Turbo C。 但我会学习！

谢谢！

您可以使用

computed observable .不需要有两个视图模型。

如果你有一个名字的可观察量，另一个可观察的 姓氏，并且您想显示全名吗？这就是计算的地方 可观察量进来 - 这些是依赖于一个或 更多其他可观察量，并将在任何时候自动更新 这些依赖关系会发生变化。

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

首先更改值绑定，通过删除optionsValue: 'theValue'将对象设置为显示值，而不仅仅是值。

由于对象现在可以未定义，因此我们需要对文本绑定进行一些保护。如果未定义，我们只需将文本设置为空字符串。我们也可以改用 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/

相关文章：