对可观察数组中项的属性进行自定义绑定,如何访问该项

Custom binding on property of item in an observable array, how to access the item?

本文关键字:何访问 访问 绑定 数组 观察 属性 自定义      更新时间:2023-09-26

Background

我有一个 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>

敲除JS这是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()));
    }
};

从数据绑定属性中,您可以使用 $data 访问当前范围的数据。

如果您在绑定中,则viewModel参数(第 4 个参数)实际上是要绑定的当前数据(因此在本例中是数组项)。 实际上,KO 2.0 中还有第 5 个参数,即上下文。 上下文包含 $data$parent$parents$root

因此,最好的办法是在绑定中使用viewModel参数。