Question

我正在学习淘汰赛js，我从淘汰赛网站获得了一个小代码来填充下拉列表。我有些困惑。所以我在这里粘贴代码。

<div id="liveExample" class="liveExample">

Choose a ticket class:
<select data-bind="options: tickets,
optionsCaption: 'Choose...',
optionsText: 'name',
value: chosenTicket"></select>

<button data-bind="enable: chosenTicket,
click: resetTicket">Clear</button>


<p data-bind="with: chosenTicket">
You have chosen <b data-bind="text: name"></b>
<span data-bind="text: price"></span>

</p>

<script type="text/javascript">
function TicketsViewModel() {
this.tickets = [
{ name: "Economy", price: 199.95 },
{ name: "Business", price: 449.22 },
{ name: "First Class", price: 1199.99 }
];
this.chosenTicket = ko.observable();
this.resetTicket = function() { this.chosenTicket(null) }
}
ko.applyBindings(new TicketsViewModel(), document.getElementById("liveExample"));
</script> 
</div>

TicketsViewModel viewmodel具有名为chosenTicket的属性。这一行this.chosenTicket = ko.observable();

的含义是什么？

似乎只是选择了Ticket属性什么都没有，所以它将返回什么因为作为一个值选项它在这里是值：selectedTicket“实际上选择的Ticket将返回什么？

selectedTicket从未填充任何东西。所以请在上面的代码中以简单的方式帮助我如何填充下拉列表？

也看到这一行ko.applyBindings(new TicketsViewModel(), document.getElementById("liveExample"));为什么div id正在传递？如果我没有通过div id那么可能会出现什么问题？感谢

更新

嗨@Daniel

你的第一个答案对我来说很好，但我不理解第二个答案。

可能你也错过了这一行，因为你没有像你这样的第二个示例代码绑定

ko.applyBindings(new viewModel());

我只是不明白selectedCountry在这里做了什么。似乎selectedCountry期待return true or false但是如何？

如果可能，请详细讨论您的selectedCountry如何运作？

感谢

Answer 1

您首先应该考虑阅读here中的文档。

基本上：

this.chosenTicket = ko.observable(),

表示任何在“更改”（在这种情况下，从下拉菜单中选择的项目）绑定到它的dom元素都将被跟踪。在简单的下拉列表中，您可以从简单的字符串跟踪到任意的Java脚本对象。

此外，当您想要跟踪特定html块的更改时，您可以传递ko.applyBindings(vm, node)，您的ko viewModel以及您想要的节点。

也许这2个例子对你来说更清楚：

<p>Destination country: <select data-bind="options: availableCountries"></select></p>

<script type="text/javascript">

        var viewModel = {
            availableCountries : ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options
        };

    // ... then later ...
    viewModel.availableCountries.push('China'); // Adds another option
</script>

或者，使用任意javascript对象：

<p>
    Your country: 
    <select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select>
</p>



<div data-bind="visible: selectedCountry"> <!-- Appears when you select something -->
    You have chosen a country with population 
    <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div>

<script type="text/javascript">
    // 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
    };
</script>

修改 selectedCountry只是一个可观察的，正如我之前所说，可观察的属性会跟踪它们绑定的内容。我能想象的最简单的例子：

今天的消息是：

<script type="text/javascript"> var viewModel = { myMessage: ko.observable() // Initially blank }; viewModel.myMessage("Hello, world!"); // Text appears </script>

有关淘汰赛如何运作的详细信息，您可以查看source。

Answer 2

像Daniel说的那样，你应该考虑阅读Knockout网站上的文档，它非常好，并且为你提供了一个简明而全面的介绍，介绍了你开始时需要知道的一切。

为您的具体例子提供更具体的答案;每当您更改下拉列表中的所选项目时，chosenTicket将包含该项目。因此，如果您选择“经济”选项，chosenTicket将包含

{ name: "Economy", price: 199.95 }

注意<div data-bind="with: chosenTicket">。这将Knockout上下文设置为chosenTicket，并允许您直接绑定到其属性。如果chosenTicket为空（当您没有选择任何内容时将会是这样），<div>将被隐藏。

如果不提供一个元素作为ko.applyBindings的第二个参数，它将把模型应用为整个页面的Knockout绑定上下文。对于大多数用例来说，这是完全正常的。但是，如果传递参数，它允许您为页面的不同部分设置单独的Knockout绑定上下文。这使您可以执行诸如绑定初始页面加载后加载的动态内容等内容。看一下这个答案的例子：

https://stackoverflow.com/a/7342861/351435

需要一些小帮助来了解使用knockout js的下拉数量

更新

2 个答案: