1

私はこの問題について数日間頭を悩ませてきましたが、まともな解決策を思いつくことができません.

私は次のモデルを持っています

{
  "id": "123",
  "key1": "foo",
  "key2": "bar",
  "metadata": {
    "height": 1,
    "width": 1  
  },
  "userPrefs": [
     {
       "name":"firstName",
       "displayName":"First name",
       "required":true,
       "dataType":"text",
       "defaultValue":"enter first name",
       "value": ""
     },
     ......
  ]
}

私のビューは、このモデル、具体的には userPrefs を使用して編集フォームを作成します。たとえば、userPrefs は次のような入力を生成します。

<input type="text" id="firstName" name="firstName" value="" placeholder="enter first name" required />

次に、ユーザーは名の値 (例: "John") を入力し、[保存] をクリックします。PUT リクエストを発行する前に、このフォーム データをモデルにマッピングし直す必要があります。

だから私は提出イベントを乗っ取ってやる

this.$('form').serializeArray()

これは、キーと値のペアの配列を返します。

[{"firstName": "John"}]

今私が抱えている問題は、これらの値をモデル内の正しい userPref に戻す最善の方法です。

私は、5 つの userPrefs が 5 つの入力になると「仮定」するという考えをもてあそびました。次に、イテレータとインデックスを使用して、正しい userPref を更新できます。しかし、私たちが知っているように、チェックされていないチェックボックスは送信されないため、単純な反復子は機能しません。

次に、シリアル化された各値を取得し、一致するように userPrefs をループしてみました。しかし、これは上記のチェックボックスの問題で失敗します。

誰でもこれに対するエレガントな解決策を見ることができますか?

  • この問題を回避するために使用すべきより良いjson構造はありますか? おそらく userPrefs のみを含む別のモデル
  • ユーザーがチェックボックスをオフにしてモデルを更新できるかどうかを知るにはどうすればよいですか
4

2 に答える 2

1

私は最終的にかなり単純な解決策を思いつきました。

var self = this;
var userPrefs = this.model.get('userPrefs');

// loop through the prefs and update one at a time....
_.each(userPrefs, function(pref, index) {       
   var item = self.$('#' + userPrefs[index].name); // userPref DOM item
   if (item[0].type === 'checkbox') {
      userPrefs[index].value = item[0].checked;
   } else {
      userPrefs[index].value = item[0].value;
   }
});

// update the model 
this.model.set('userPrefs', userPrefs);

最初に各 userPref を使用してフォームを作成したので、それらをループして dom を照会できます。

その後、値をモデルに挿入し直すことができます。

私が見ることができる2つの欠点があります

  • 実際に変更されたかどうかに関係なく、モデルの値を更新しています
  • チェックボックスのハードコーディングされたチェックがあります

しかし、私のユースケースでは、これは受け入れられます。

于 2013-09-19T08:51:34.130 に答える