Question

我已经阅读了一些关于基本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>

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

中

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

在一个漂亮的数字JS库的帮助下，它被正确地格式化为逗号（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。没有必要有两种视图模型。

如果你有firstName的可观察量，而另一个有 lastName，你想显示全名吗？这是计算的地方观察者进来 - 这些是依赖于一个或多个的功能更多其他可观察者，并将随时自动更新这些依赖关系发生了变化。

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

首先更改您的值绑定，将对象设置为displayTheValue，而不是仅删除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/

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

1 个答案: