访问JavaScript数组的元素

Question

我在访问我的视图模型中的模型对象时遇到了一些麻烦。这可能只是一个JavaScript/KnockoutJS熟悉的问题，所以任何帮助表示赞赏。这里是我的代码：

<!-- VIEW --> 
<select data-bind="options: allTypes, 
        optionsCaption: 'Choose...',     
        value: chosenType"></select> 
<div data-bind="text: chosenType"></div> 
<div data-bind="text: chosenValues"></div> <!-- << This line not working --> 
<script type="text/javascript"> 

/*-- VIEW MODEL --*/ 
function ViewModel() { 
    this.chosenType=ko.observable(); 
    this.chosenValues=allValues[this.chosenType]; // <-- Problem here? 
} 

/*-- MODEL --*/ 
var allTypes=["Animals","Plants","Minerals"]; 
var allValues={ 
    "Animals":["Pig","Big pig","Owl"], 
    "Plants":["Aloe","Fern"], 
    "Minerals":["Bauxite","Chromite"] 
    }; 

    ko.applyBindings(new ViewModel()); 
</script> 

我认为这个问题可能在如何声明this.chosenValues。谢谢阅读。

Answer 1

text绑定仅针对单个值，而不是集合/数组。 可以使用的foreach结合列出每个项目即

<div data-bind="foreach: chosenValues"> 
    <span data-bind="text: $data"></span> 
</div> 

或者你可以使用一个computedObservable即

function ViewModel() { 
    this.chosenType=ko.observable(); 
    // computed value is evaluated if an observable value changes 
    // this creates a comma separated string of values 
    // you'll probably want safety checks here but just a quick sample 
    this.chosenValues=ko.computed(function() { 
     var chosenVals=allValues[this.chosenType()]; 
     return chosenVals.join(', '); 
    }, this); 
} 

还记得更新从模型中的UI，你会需要一些可观察的形式。在您的示例selectedValues不是一个可观察的，所以如果选择更改不会更新UI。

也看到https://jsfiddle.net/51oufny4/的工作示例

编辑 ** 这里是在上面拨弄提供的示例：

<!-- VIEW --> 
<select data-bind="options: allTypes, 
       optionsCaption: 'Choose...',     
       value: chosenType"></select> 
<div data-bind="text: chosenType"></div> 
<div data-bind="text: chosenValues"></div> 
<script type="text/javascript"> 

/*-- VIEW MODEL --*/ 
function ViewModel() { 
    this.chosenType=ko.observable(); 
    this.chosenValues=ko.computed(function(){ 
     return allValues[this.chosenType()]; 
    }, this); 
} 

/*-- MODEL --*/ 
var allTypes=["Animals","Plants","Minerals"]; 
var allValues={ 
    "Animals":["Pig","Big pig","Owl"], 
    "Plants":["Aloe","Fern"], 
    "Minerals":["Bauxite","Chromite"] 
}; 

ko.applyBindings(new ViewModel()); 
</script>