我应该在哪里使用带Knockout Computed和数组的括号 [英] Where should I use parentheses with Knockout Computed and arrays

问题描述

我将选项绑定和计算方法结合在一起，并在Firebug控制台中收到错误消息:

I am combining an Options binding and a Computed, and am getting the error in the Firebug console:

TypeError:this.selectedCountryNeverNull未定义

TypeError: this.selectedCountryNeverNull is undefined

这是ViewModel的相关部分:

This is the relevant part of the ViewModel:

    // Constructor for an object with two properties
    var Country = function (name, population) {
        this.countryName = name;
        this.countryPopulation = population;
    };

    var viewModel = {
        availableCountries: ko.observableArray([
            new Country("UK", 65000000),
            new Country("USA", 320000000),
            new Country("Sweden", 29000000)
        ]),
        selectedCountry: ko.observable(), // Nothing selected by default
        selectedCountryNeverNull: ko.observable(), // has default
        selectedCountryDesc: ko.computed(function () { return '*' + this.selectedCountryNeverNull.countryName + '*'; }, this)
    };

这是选择:

    <select data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountryNeverNull"></select>

我省略了optionsCaption:，以便第一个数组元素为默认元素，并且该值永远不会为空.

I left out the optionsCaption: so that the first array element is the default, and the value is never null.

Firebug说错误出现在ko.computed行中，我试图在此添加()括号，但无济于事.

Firebug says the error is in the ko.computed line, and I tried to add () parentheses here and there, but with no avail.

我想做更大的ko.computed事情，但是在示例扩展中，我的问题与淘汰赛站点隔离开了.

I want to do much bigger ko.computed stuff, but isolated my problem in this extension of an example from the knockout site.

感谢您在尝试理解括号中的问题，特别是我的问题方面的帮助.

Thanks for any help in trying to understand the parentheses issues in general and mine particular.

推荐答案

我发现您的代码存在三个问题:

I see three problems with your code:

ko.computed中的
1. this是指Window，而不是viewModel，
2. select绑定在applyBindings时设置其值，因此在短时间内，selectedCountryNeverNull实际上是未定义的.这意味着您必须手动将其设置为默认值，或者检查计算出的虚假值
3. 在计算中，您需要使用()来获取selectedCountryNeverNull的值并创建一个依赖项.

1. this in your ko.computed refers to Window, not to viewModel,
2. The select binding sets its value at the time of applyBindings, so for a brief period of time, selectedCountryNeverNull is actually undefined. This means you'll have to set it with a default manually or check for falsey values in your comptued
3. In the computed, you'll need to use the () to get selectedCountryNeverNull's value and create a dependency.

有关如何解决这三个问题的示例:

An example on how to fix all three:

1. 使用构造函数和new关键字管理this，
2. 默认为计算的(|| {})中的空对象
3. 在计算的(())中调用可观察对象

1. Use a constructor and the new keyword to manage this,
2. Default to an empty object in the computed ( || {} )
3. Call the observable in the computed ( () )

// Constructor for an object with two properties
var Country = function(name, population) {
  this.countryName = name;
  this.countryPopulation = population;
};

var ViewModel = function() {
  this.availableCountries = ko.observableArray([
    new Country("UK", 65000000),
    new Country("USA", 320000000),
    new Country("Sweden", 29000000)
  ]);
  
  this.selectedCountry = ko.observable(); // Nothing selected by default
  
  this.selectedCountryNeverNull = ko.observable(); // has default
  
  this.selectedCountryDesc = ko.computed(function() {
    return '*' + (this.selectedCountryNeverNull() || {}).countryName + '*';
  }, this);
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountryNeverNull"></select>
                   
Selection: <span data-bind="text: selectedCountryDesc"></span>

这篇关于我应该在哪里使用带Knockout Computed和数组的括号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！