如何使用DropDown在KnockOut中使用虚拟绑定后?

时间:2014-03-04 05:24:56

标签: knockout.js

这里我使用虚拟绑定来隐藏下拉列表。对于条件,我将显示dropdowmlist。但我无法选择下拉列表。

                      <!-- ko if: chartType -->
                        <select id="chartType">
                            <option>column</option>
                            <option>bar</option>
                        </select>
                      <!-- /ko -->

和我的js:

$("#li_tab2").live("click", function () { viewModel.chartType(true); });

如何解决这个问题请帮助我?

1 个答案:

答案 0 :(得分:2)

如果要获取选择框的值,则需要将绑定添加到选择元素

<强> HTML

<button data-bind="click: onShowChartType">Show Chart Type</button>
<!-- ko if: chartType -->
    <select id="chartType"  data-bind="
         options: chartTypes, 
         optionsCaption:'Please select...', 
         value: selectedChartType">
    </select>
<!-- /ko -->

<br />
<span>Selected chart type:</span>
<span data-bind="text: selectedChartType"></span>

<强>的Javascript

var viewModel = { 
    chartType: ko.observable(false),
    chartTypes: ko.observableArray(["column", "bar"]),
    selectedChartType: ko.observable(),
    onShowChartType: function() {
        this.chartType(true);
    }
};

ko.applyBindings(viewModel);

JSFiddle