对可观察数组中项的属性进行自定义绑定,如何访问该项
Custom binding on property of item in an observable array, how to access the item?
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
参数。
相关文章:
- 访问布局信息是否也会导致浏览器重排
- Javascript,访问一个主要对象模块模式中的每个对象
- 如何访问声音管理器2创建的声音对象
- 在Twitter上用ie9中的空白src访问iframe的contentWindow
- JavaScript Pub/Sub属性访问问题
- 从JavaScript访问struts操作中的属性
- 是否可以从父类访问子类的属性
- 如何访问fastOpt.js
- 访问JSON对象内部的数组元素
- 从模块内部访问Express装载路径
- 难以访问的JS环境中的语法错误
- 如何从对象的原型方法访问JavaScript对象属性
- 访问json数组中的对象
- 通过javascript/html访问twitter共享iframe
- Dojo:访问dijit.form.Select中单击的项目
- 为什么在这个网站上不能通过JS访问元素
- 从ng模板访问作用域
- 如何访问UIWebView'的子窗口上下文
- 如何访问访问过的链接历史记录
- 使用postmessage进行跨域iframe访问-访问被拒绝