gpt4 book ai didi

javascript - 可观察数组中项目属性的自定义绑定(bind),如何访问该项目?

转载 作者:行者123 更新时间:2023-11-29 22:24:54 24 4
gpt4 key购买 nike

背景

我有一个 GalleryImages 可观察数组,其中每个项目都有与图像相关的属性(名称、描述、路径等)。 foreach 的 knockout 遍历对象数组以生成包含图像、名称和描述的跨度。如果用户单击图像名称或描述,他们可以编辑值并按保存/取消以更新 View 模型。

问题

鉴于自定义绑定(bind)绑定(bind)到可观察数组中某个项目的属性,您如何在自定义绑定(bind)的定义中访问该属性所属的项目?我想获取刚刚编辑的项目并将其传递给一个函数,该函数将使用更改更新服务器。

我尝试查看 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 的自定义绑定(bind)

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()));
}
};

最佳答案

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

如果您处于绑定(bind)中,则 viewModel 参数(第 4 个参数)实际上是当前绑定(bind)的数据(在这种情况下是您的数组项)。 KO 2.0 中实际上还有第 5 个参数,即上下文。上下文包含 $data$parent$parents$root

因此,最好的办法是在绑定(bind)中使用 viewModel arg。

关于javascript - 可观察数组中项目属性的自定义绑定(bind),如何访问该项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10147204/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com