如何根据knockoutjs中的选择获取值

时间:2015-03-18 12:45:37

标签: javascript knockout.js

我使用knockout从API获取一些数据来填充我的文本框。我想在您选择药物时从API获得单价。我怎样才能做到这一点?

<div class="control-group">
    <label class="control-label">Drug:</label>
    <div class="form-horizontal">
        <select id="Drug_ddl" data-bind="options: drugs, optionsText: function (item) { return item.Description; }, value: selectedDrug" class="input-xlarge"></select>
    </div>
</div>


<div class="control-group">
    <label class="control-label">Unit Price:</label>
    <div class="form-horizontal">
        <input type="number" data-bind="value: unitPrice" step="0.01" class="input-xlarge" id="UnitPrice_txt" />
    </div>
</div>

<div class="control-group">
    <label class="control-label">Quantity:</label>
    <div class="form-horizontal">
        <input type="number" data-bind="value: quantity" step="1" class="input-xlarge" id="Qty_txt" />
    </div>
</div>

<div class="control-group">
    <label class="control-label">Cost:</label>
    <div class="form-horizontal">
        <input type="text" data-bind="value: drugcost" readonly="readonly" step="0.01" class="input-xlarge" id="Cost_txt" />
        <input type="button" id="AddDrugs_btn" data-bind="click: addDrug" class="btn btn-primary" value="Add" />

    </div>
</div>

这是viewModel的代码:

var claimEntryViewModel = function () {

    var drugs = ko.observableArray([]);
var unitPrice = ko.observable('0.00');
    var quantity = ko.observable('1');
    var drugcost = ko.computed(function () {
        return quantity() * unitPrice();
    });

 var loadDrugs = function () {
        url = apiServerUrl + "Items/";

        $.ajax({
            url: url,
            headers: { 'Access-Control-Allow-Origin': '*' },
            contentType: 'application/json',
            dataType: 'json',
            type: 'GET',
            crossDomain: true,
            success: function (data) {

                drugs(data);

            },
            error: function (data) {
                console.log("Is not answered");
                console.log(data);
            }
        });
    }

 var selectedDrug = ko.observable();

    var addDrug = function () {

        var match = ko.utils.arrayFirst(claimDrugs(), function (item) {
            return selectedDrug().ID === item.Id;
        });

        if (!match) {
            claimDrugs.push({
                Id: selectedDrug().ID,
                Description: selectedDrug().Description,
                unitPrice: selectedDrug().SalesPrice,
                quantity: quantity(),
                drugcost: drugcost(),
            });
        } else {
            errorMessage("Already exists!");
        }
    }

return {
        drugs: drugs, 
        addDrug: addDrug,
        selectedDrug: selectedDrug,
        unitPrice: unitPrice,
        quantity: quantity,
        drugcost: drugcost,
    }

}
有人友好地向我提供了可以做到这一点的代码,我是一个相当新的淘汰赛,并且真的不知道如何解决这个问题。感谢

1 个答案:

答案 0 :(得分:0)

超酷是对的,订阅是处理这个问题的好方法。

    selectedDrug.subscribe(function (newValue) {
                neededInfo(getSelectedDrugInfoFromApi(newValue));
            });

每次selectedDrug observable值发生变化时,都会调用getSelectedDrugInfoFromApi(),并更新neededInfo observable。 请记住,不要更新subscribe函数中的selectedDrug值,因为它会创建一个循环。

相关问题