Question

我正在尝试创建可编辑的表单，其中显示初始数据，当用户进入编辑模式时，会显示Kendo ComboBoxes以选择新值。

只有当用户启动编辑模式时，才会按需加载组合框的所有值（不需要将数据提取到客户端只是为了查看当前状态）。

换句话说 - 表单显示为只读输入。点击“编辑”按钮。这将调用服务来加载数据（不是小提琴，只是辅助方法），并显示按foreach周期中每个项目的特定ID过滤的ComboBox。因此，每个ComboBox都只显示基于过滤器的正确值。

如何创建GetBrokersInRole（）的工作版本并将其绑定到表单数据？

日Thnx

标记：

<div data-bind="foreach: Roles">
    <label data-bind="text: RoleName"></label>
    <div data-bind="visible: !$root.IsEditMode()">
        <input data-bind="enable: $root.IsEditMode(), value: ValueText" />
    </div>
    <div data-bind="visible: $root.IsEditMode()">
        <!-- OK -->
        <input data-bind="kendoComboBox: { data: $root.BrokersInRoles, dataTextField: 'BrokerName', dataValueField: 'BrokerID', value: ValueID }" />
        <!-- NOT OK -->
        <input data-bind="kendoComboBox: { data: $root.GetBrokersInRole($data), dataTextField: 'BrokerName', dataValueField: 'BrokerID', value: ValueID }" />
    </div>
</div>
<p>
    <button data-bind="click: StartEdit">Set Edit Mode</button>
</p>
<label data-bind="text: Brokers().length"></label>

视图模型：

// Roles and initial values
var roles = [
    {"RoleID":1,"RoleName":"Role 1","ValueID":101,"ValueText":"Broker 1"},
    {"RoleID":2,"RoleName":"Role 2","ValueID":102,"ValueText":"Broker 2"},
    {"RoleID":3,"RoleName":"Role 3","ValueID":103,"ValueText":"Broker 3"},
    {"RoleID":4,"RoleName":"Role 4","ValueID":104,"ValueText":"Broker 4"}
];

// RolesID is collection of Roles where Broker is available
// so BrokerID=101 is available in ComboBox for RoleID 1 and 3
var brokers = [
    {"BrokerID":101,"BrokerName":"Broker 1","RolesID":"1;3"},
    {"BrokerID":102,"BrokerName":"Broker 2","RolesID":"1;2"},
    {"BrokerID":103,"BrokerName":"Broker 3","RolesID":"3"},
    {"BrokerID":104,"BrokerName":"Broker 4","RolesID":"4"}
];

// ViewModel
var ViewModel = function() {

    // Roles and initial values
    this.Roles = ko.observableArray(roles);
    // Initial value is empty - no comboboxes if not in edit mode (save data)
    this.BrokersInRoles = ko.observableArray([]);  
    // Is edit mode?
    this.IsEditMode = ko.observable(false);

    // Alternative method to AJAX load of Brokers collection
    // Until edit mode is active, BrokersInRoles collection is empty
    this.StartEdit = function() 
    { 
        var self = this;
        self.BrokersInRoles(brokers); // This will be AJAX load on demand
        self.IsEditMode(true); 
    };

    // Filter brokers based on role
    this.GetBrokersInRole = function (roleItem) {
        var self = this;

        var filtered = ko.utils.arrayFilter(self.BrokersInRoles(), function (broker) {
            return _.contains(broker.RolesID().split(';'), roleItem.RoleTypeID().toString());
        });

        // Return only brokers in selected role
        return ko.observableArray(filtered);
    };
};

ko.applyBindings(new ViewModel());

小提琴： http://jsfiddle.net/RaptorCZ/drkb6mLk/

Answer 1

我看到有两件事可以帮助解决这个问题。首先，Knockout-Kendo没有设置为跟踪对不可观察或计算的东西的依赖（比如返回值的函数）。所以，它没有重新评估。

您可以在Roles的每一个上创建一个计算表示该数据或根据您的代码，您可以将kendoComboBox包裹起来：

    <!-- ko with: $root.GetBrokersInRole($data) -->
    <input data-bind="kendoComboBox: { data: $data, dataTextField: 'BrokerName', dataValueField: 'BrokerID', value: $parent.ValueID }" />
    <!-- /ko -->

现在，当GetBrokersInRole中访问的依赖项更新时，它将被正确地重新呈现。

此外，看起来您的过滤逻辑略有偏差（至少对于您的小提琴中的代码而言）。您的角色的属性不可观察，并且没有RoleTypeID。也许这个：

var filtered = ko.utils.arrayFilter(self.BrokersInRoles(), function (broker) {
       return _.contains(broker.RolesID.split(';'), roleItem.RoleID.toString());
});

更新了小提琴：http://jsfiddle.net/rniemeyer/kz5o5h5y/

在KnockoutJS foreach循环中过滤了KendoUI ComboBox

1 个答案: