0

私はknockout.jsを使い始めましたが、とても気に入っています。ASP.Net mvc、jQuery、knockout.jsを使用しています

私の質問はこれです：私がユーザーの管理画面を持っているとしましょう、ユーザーはユーザー内の私のビューモデルです私は権限の配列が必要です

私のユーザーviewModel：

var userViewModelClass = function () {
   var self = this;
   ko.mapping.fromJS({
       ID: "",
       permissions: []
   }, {}, self);
}

今..サーバーにajaxリクエストを実行し、JSONを取り戻すと、マッピングプラグインを使用し、すべてが期待どおりに実行されます

しかし...今、レンダリングされたパーミッションリストに削除のようなアクションを持たせたいです。したがって、アクセス許可オブジェクトが必要になり、アクセス許可の配列はアクセス許可オブジェクトの配列になります。しかし、どうすればそれを行うことができますか？マッピングプラグインは、サーバーから配列内で返されるオブジェクトが実際には次のようなオブジェクト上にあることをどのように認識しますか？

 function permission() {
   var self = this;
   this.delete = function () {       
   };
   ko.mapping.fromJS({
       name: "",
       level: ""
    }, {}, self);
}

それが私の最初の質問です。2番目の部分：すべてのアクセス許可の配列を持つモデルを取得し、それらがすべてこのアクセス許可オブジェクトであるとします。ここで、ビュー内の各削除ボタンを、アクセス許可オブジェクト内の削除関数にバインドする必要があります。使用：

data-bind="click: delete"

削除機能の最適な実装は何ですか？私は次のようなことを考えました：サーバーにajax呼び出しを行うと、実際にユーザーからアクセス許可が削除されます。次に、呼び出しが成功した場合、監視可能な配列から現​​在のアクセス許可を削除すると、ビューが更新されます...これは良い習慣ですか？

ありがとう！

4

1 に答える 1

1

最初の部分。マッピングオプションを使用する必要があります。あなたの中でこれをuserViewModelClass行います。

var userViewModelClass = function () {
   var self = this;
   ko.mapping.fromJS({
       ID: "",
       permissions: []
   }, {
       permissions: {
           create: function(options) {
               return new permission(options.data);
           }
       }
   }, self);
}

そして、そのようにあなたの許可オブジェクトを変更します

function permission(config) {
   var self = this;
   this.delete = function () {       
   };
   ko.mapping.fromJS($.extend({
       name: "",
       level: ""
    }, config), {}, self);
}

デフォルトの構造が残り、受信データによって上書きされるように、拡張機能を追加したことに注意してください。

あなたの質問の2番目の部分。考えられる1つの方法は、コンストラクターで親への参照を渡すことです。したがって、上記のマッピングオプションは次のようになります

permissions: {
    create: function(options) {
        return new permission(options.data, self);
    }
}

次に、削除は次のようになります。

this.delete = function () {  
    $.ajax(deleteurl, yourdata, function(result) {
       // success
       parent.permissions.remove(self);
    }, function() {
       // failure
       display error message
    }     
};

編集

コメントで説明されている別の方法。

var userViewModelClass = function () {
   var self = this;
   ko.mapping.fromJS({
       ID: "",
       permissions: []
   }, {
       permissions: {
           create: function(options) {
               return new permission(options.data);
           }
       }
   }, self);

   this.delete = function(permission) {
       self.permissions.remove(permission);
   };
}

data-bind="click: $parent.delete"

お役に立てれば。

于 2012-06-14T15:35:37.513 に答える