javascript - 根据下拉值显示内容的 knockout 问题

Question

我刚刚创建了一个 jsfiddle 以便您可以进行快速编辑 JSFIDDLE Link to Code

如您所见Array selectedChoice在下拉菜单中工作正常，并根据下拉菜单选择的值显示内容。

但是，当我尝试使用 CountryModel使用属性 id 和名称，它在 Internet Explorer 中会出现错误，但在 Firefox 中不会。然而，奇怪的是默认行为不是隐藏内容 <p>This content appear when US is selected</p>

我怀疑这段代码

    <section data-bind="visible: selectedChoiceWithModel().name==='US'"> 

这个我也试过

<section data-bind="if: selectedChoiceWithModel().name === 'Russia', 
     hasfocus: selectedChoiceWithModel().name === 'Russia'">
    <p>This content appear when Russia is selected</p>

两个问题:

typescript 代码

class CountryModel {
    id: number;
    name: string;

}

编译为

var CountryModel = (function () {
    function CountryModel() {
    }
    return CountryModel;
})();

typescript 代码 /// /// ///

class ViewModel {
    constructor()
    {
        //initialize the data for the model now this has two purposes. Consider separating the model from its data generation. 
        var x = new CountryModel();
        x.id = 1;
        x.name = "Russia";
        var y = new CountryModel();
        y.id = 2;
        y.name = "US";
        this.countries.push(x);
        this.countries.push(y);
    }

    availableDrugs = ['A', 'B', 'others'];
    firstName: KnockoutObservable<string>  = ko.observable();
    isVisible: KnockoutObservable<boolean> = ko.observable(true); 
    selectedChoice = ko.observable();
    selectedChoiceWithModel = ko.observable();
    countries: KnockoutObservableArray<CountryModel> = ko.observableArray([]);
    sendMe = function () {

        alert(ko.toJSON({ selectedCountryId: this.selectedChoice() }));
    };
}


$(() => {
    ko.applyBindings(new ViewModel(), document.getElementById("model"));
});

编译为

/// <reference path="CountryModel.ts" />
/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />
/// <reference path="../Scripts/typings/jquery/jquery.d.ts" />
var ViewModel = (function () {
    function ViewModel() {
        this.availableDrugs = ['A', 'B', 'others'];
        this.firstName = ko.observable();
        this.isVisible = ko.observable(true);
        this.selectedChoice = ko.observable();
        this.selectedChoiceWithModel = ko.observable();
        this.countries = ko.observableArray([]);
        this.sendMe = function () {
            alert(ko.toJSON({ selectedCountryId: this.selectedChoice() }));
        };
        //initialize the data for the model now this has two purposes. Consider separating the model from its data generation.
        var x = new CountryModel();
        x.id = 1;
        x.name = "Russia";
        var y = new CountryModel();
        y.id = 2;
        y.name = "US";
        this.countries.push(x);
        this.countries.push(y);
    }
    return ViewModel;
})();

$(function () {
    ko.applyBindings(new ViewModel(), document.getElementById("model"));
});

HTML代码

<!--http://jsfiddle.net/pkysylevych/dqUAz/2/
    http://stackoverflow.com/questions/12516123/use-knockout-to-hide-display-questions-based-on-selected-value-in-drop-down
    http://jsbin.com/egacil/2/edit
    http://www.codeproject.com/Articles/342244/Knockout-that-cascading-dropdown

    -->
@section scripts
{
    <script src="~/js/RequestFormModel.js"></script>
    <script src="~/js/CountryModel.js"></script>
}
<div id="model">

<p>First name: <strong data-bind="text: firstName"></strong></p>


<p>First name: <input data-bind="value: firstName" /></p>

   <input type="checkbox" data-bind="checked: isVisible"/>
   <div data-bind="if: isVisible">Hide this content.</div>

        <!--Display content usign observable array--> 
    <select data-bind="options: availableDrugs, value: selectedChoice, optionsCaption: 'choose..'"></select> 
      <input type="text" data-bind="value: firstName, visible: selectedChoice() === 'others', hasfocus: selectedChoice() === 'others'" /> 


    <section data-bind="visible: selectedChoice() === 'A', hasfocus: selectedChoice() === 'A'">
        <p> This content appear when a is selected</p>

    </section>
    <section data-bind="visible: selectedChoice() === 'B', hasfocus: selectedChoice() === 'B'">
        <p>This content appear when B is selected</p>
    </section>




    <!---Sample number two with models instead of just an array --> 
      <select data-bind="options: countries, optionsText: 'name', value: selectedChoiceWithModel, optionsCaption: 'Choose...'"></select>



            <section data-bind="visible: selectedChoiceWithModel().name==='US'">
            <p>This content appear when US is selected</p>
    </section>


</div>

Answer 1

我怀疑您的绑定(bind)在 ie 中中断，而在其他更好的浏览器中没有中断，因为 ie 无法处理大小写错误。

hasFocus 绑定(bind)是驼峰式命名的，因此请尝试将所有 hasfocus 绑定(bind)转换为 hasFocus。

编辑

好吧，你的问题不止一个 -

http://jsfiddle.net/BJhQz/14/

在尝试绑定(bind)到它的属性之前，您需要确保定义了 selectedChoiceWithModel。我向您的 View 添加了一个无容器绑定(bind)，以防止在尚未选择它的情况下尝试查看它的名称。

接下来，我对您的 View 模型进行了一些更新，以使其更易于我理解。我并不是说它们是必需的，但如果没有它们，您的 View 模型就会因为我无法阅读而受到影响。

StackOverflow.com 需要一些代码，所以在这里 -

<!-- ko if: selectedChoiceWithModel() -->
    <section data-bind="visible: $data.selectedChoiceWithModel().name() === 'Russia'">
        <p>This content appear when Russia is selected</p>
    </section>
    <h1 data-bind="text: selectedChoiceWithModel().name()"></h1>
<!-- /ko -->