0

ユーザーがリストから1枚の写真を選択していくつかのプロパティを変更できるシンプルなページを作成したいので、モデルを作成しました:

model = {
            newPhotos: [],
            currentPhoto: {
                id: 0,
                description: ""
            },
            setCurrent: function (photo, e) {
                ko.mapping.fromJS(ko.mapping.toJS(photo), viewModel.currentPhoto);
            }
      }

およびマークアップ:

               <div class="content" data-bind="foreach: newPhotos">
                    <div class="photo" data-bind="click: $parent.setCurrent">
                        <div class="frame" data-bind="img: imageSrc">
                        </div>
                    </div>
                </div>
        <div class="edit-area" data-bind="with: currentPhoto">
            <canvas id="image-edit" />
            <textarea class="multi-line" name="PhotoDesc" data-bind="value: description"></textarea>
        </div>

主なアイデアは、ユーザーが写真をクリックすると、setCurrent関数が呼び出され、そこでcurrentPhotoバインディングをクリックして渡されるビューモデルで更新できるということですがsetCurrent、ビューモデルがルートモデルになることを期待して(ソースからわかるように)問題があり ます。すべてのオブザーバブルを手動で調べて値を更新するか、rootModel のマッピングを解除し、プロパティを設定してからルートを更新できることはわかっていますが、これを行うにはもっと複雑でエレガントな方法があると思います。ko.mapping.fromJS(jsObj, viewModel)

ありがとうございました。

4

1 に答える 1

1

現在の写真をオブザーバブルとして設定すると、マップを使用して JSON の詳細を含むオブザーバブルを読み込むことができます。

  self.currentPhoto(ko.mapping.fromJS(data));

以下は、実際に動作する JSFiddle です。

http://jsfiddle.net/jearles/wgZ59/7/

于 2012-02-26T15:45:19.797 に答える