'foreach'和'with'绑定不能一起工作

时间:2016-03-31 13:29:29

标签: knockout.js

我正在尝试使用foreach绑定列表,并且还绑定表中的dropdown或select元素。当用户单击选择元素关联的税值绑定到税收字段时。我使用with绑定上下文绑定此字段但它不起作用,所以我的代码中的问题是什么?

function formatCurrency(value) {
    return "$" + value.toFixed(4);
}

function MEI(vm) {
    var self = this;
    self.Amount = ko.observable();
    self.RevenueDetails = ko.observableArray(vm.RevenueDetails());
    self.selectedItem = ko.observable();
    self.RepCode = ko.observable();
}

$(document).ready(function () {
    ko.applyBindings(new MEI(ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model)))));
});
<table class="table table-striped table-bordered table-hover table-full-width" id="sample_2">
    <thead>
        <tr>
            <th>Date</th>
            <th class="hidden-xs">TaxCode</th>
            <th class="hidden-xs">Tax</th>
            <th class="hidden-xs">Total</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:RevenueDetails">
        <tr>
            <td>
                <input type="text" class="form-control form-control-inline input-medium date-picker"  data-date-format="mm-dd-yyyy" readonly>
            </td>   
            <td>
                <select class="form-control" data-bind='options:DefaultTaxCodes, optionsCaption: " -- ", optionsText: function (item) { return item.Tax }, optionsValue: function (item) { return item.TaxCodeId }, value:$parent.selectedItem'>
                </select>
            </td>                         
            <td data-bind="with:$parent.selectedItem">  
                <span data-bind="text:TaxRate" />                              
            </td>
            <td>
                <input  class="form-control"  />                             
            </td>   
          </tr>
    </tbody>         
</table>

enter image description here

1 个答案:

答案 0 :(得分:0)

  • 密切关注绑定表达式中的引号。在您的问题中的示例中,您混淆了单引号和双引号。
  • 如果要将实际项目本身(在本例中为optionsValue对象)保存到可观察的RevenueDetails,请不要使用$parent.selectedItem绑定情况下)
  • 避免在绑定中编写函数。使用可观察量或计算值。如果您需要一个函数来计算某些东西,请在viewmodel中创建它,而不是在视图中创建它。
  • optionsText需要一个字符串(来自options中对象的键的名称)
  • 您不必在同一行上编写绑定表达式。为了便于阅读,请格式化源代码。
<select class="form-control" data-bind="
    options: DefaultTaxCodes,
    optionsCaption: ' -- ',
    optionsText: 'Tax'
    value: $parent.selectedItem
">