2

バックグラウンド

各項目が画像に関連するプロパティ (名前、説明、パスなど) を持つ GalleryImages 監視可能な配列があります。ノックアウト foreach は、オブジェクト配列を反復処理して、画像、名前、および説明を含むスパンを生成します。ユーザーが画像の名前または説明をクリックすると、値を編集し、保存/キャンセルを押してビュー モデルを更新できます。

質問

カスタム バインディングが監視可能な配列内のアイテムのプロパティにバインドされている場合、カスタム バインディングの定義内でプロパティが属するアイテムにどのようにアクセスするのでしょうか? 編集したばかりのアイテムを取得し、サーバーを変更して更新する関数に渡したいと思います。

allBindingsAccessor() を見てみましたが、アイテムそのものではなく、アイテムのプロパティを返します。

HTML

<div data-bind="foreach: GalleryImages">
    <span class="img">
        <a data-bind="attr: { href: URL}">
            <img data-bind="attr: { src: URL}"/>
        </a>
        <div>
            <h4 data-bind="text: ItemName"></h4>
            <input type="text" data-bind="clickEditor: ItemName"/>
        </div>
        <div>
            <span data-bind="text: Description"></span>
            <textarea data-bind="clickEditor: Description"></textarea>
        </div>
    </span>
</div>

knockoutJS clickEditor のカスタム バインディングは次のとおりです。

ko.bindingHandlers.clickEditor = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var $element = $(element).hide();
        var $text = $element.prev();
        var $parent = $element.parent();

        var $editElements = $("<div class='editConfirm'> \
            <button class='saveEdit' type='button'>Save</button> \
            <button class='cancelEdit' type='button'>Cancel</button> \
        </div><span class='placeHolder'></span>").hide().insertAfter($element).add($element);

        var _toggle = function (edit) {
            $text[edit ? 'hide' : 'show']();
            $editElements[edit ? 'show' : 'hide']();
        };

        $text.click(function (e) {
            _toggle(true);              
        });

        $editElements.find('.saveEdit').click(function () {
            _toggle(false);

            //update clientside viewModel
            valueAccessor()($element.val());

            // this var needs to contain the item in the observable array that was updated
            var imageUpdated;

            //update server with changes
            saveModel(imageUpdated);
        });

        $editElements.find('.cancelEdit').click(function () {
            _toggle(false);
            $(element).val(ko.utils.unwrapObservable(valueAccessor()));
        });
    }
    , update: function (element, valueAccessor) {
        $(element).val(ko.utils.unwrapObservable(valueAccessor()));
    }
};
4

1 に答える 1

2

データ バインド属性から、 を使用して現在のスコープのデータにアクセスできます$data。

バインドしている場合、viewModel引数 (4 番目の引数) は実際にはバインドされている現在のデータです (したがって、この場合は配列項目)。実際には KO 2.0 にも 5 番目の引数があり、これがコンテキストです。コンテキストには、、、、$dataおよび$parentが$parents含まれます$root。

したがって、最善の策はviewModel、バインディングで arg を使用することです。

于 2012-04-13T19:51:37.893 に答える