1

初期データが表示される編集可能なフォームを作成しようとしています。ユーザーが編集モードに入ると、新しい値を選択するために Kendo ComboBoxes が表示されます。

コンボ ボックスのすべての値は、ユーザーが編集モードを開始したときにのみオンデマンドで読み込まれます (現在の状態を表示するためだけにクライアントにデータをフェッチする必要はありません)。

つまり、フォームは入力のみで読み取り専用として表示されます。「編集」ボタンをクリックします。これにより、データをロードするサービスが呼び出され (フィドルではなく、ヘルパー メソッドのみ)、foreach サイクルのすべてのアイテムに対して特定の ID でフィルター処理された ComboBoxes が表示されます。したがって、すべての 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/

4

1 に答える 1

0

これを修正するのに役立つことが 2 つあります。まず、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/

于 2015-04-08T14:02:00.120 に答える