如何通过 ko.observableArray() 使用自定义绑定

2023-11-26

剔除自定义绑定如何与 observableArray 一起使用?当将 ko.observable() 与自定义绑定一起使用时,一切都会按预期工作。当使用 ko.observableArray() 时,仅抛出初始事件(初始化和更新一次),但不会检测到进一步的更改(请参阅Fiddle或下面的代码)。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="knockout-2.2.1.js"> </script>
</head>
<body>
    <div data-bind="text: Observable, updateBinding: Observable"></div>
    <div data-bind="foreach: ObservableArray, updateBinding: ObservableArray">
        <span data-bind="text: $data"></span>
    </div>
    <script type="text/javascript"> 
        ko.bindingHandlers['updateBinding'] = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                alert("Binding Handler (Init)");
            },
            update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                alert("Binding Handler (Update)");
            }
        };

        function ViewModel() {
            var self = this;

            self.ObservableArray = ko.observableArray();
            self.Observable = ko.observable();
        }

        var viewModel = new ViewModel();

        // Fires Init + Update for Observable and ObservableArray
        ko.applyBindings(viewModel);

        // Fires Update for Observable
        viewModel.Observable(1);

        // Does nothing
        viewModel.ObservableArray.push('1');
    </script>
</body>
</html>

您将需要在自定义绑定中创建对 observableArray 的依赖项。所以,至少是这样的:

    ko.bindingHandlers.updateBinding = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            alert("Binding Handler (Init)");
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            //create a dependency, normally you would do something with 'data'
            var data = ko.utils.unwrapObservable(valueAccessor());
            alert("Binding Handler (Update)");
        }
    };

这适用于您的可观察示例的原因是因为单个元素上的所有绑定都是一起触发的(更多信息here).

这在其他绑定上的行为方式不同的原因是foreach行为不同。对 observableArray 的更改不会触发foreach直接绑定(或者整个部分将被重新渲染)。相反,它会触发单独的 ko.compulated 中的逻辑,该逻辑评估数组如何更改并进行必要的增量更新(添加项目、删除项目等)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过 ko.observableArray() 使用自定义绑定 的相关文章

  • 指定网格中的默认排序

    使用knockout kendo绑定绑定Telerik Kendo网格时是否可以指定默认排序 我像这样绑定网格 kendoGrid data grid Rows sortable allowUnsort false mode single
  • 我可以对每个对象属性执行 jquery-tmpl 吗

    模板 each 指令非常适合迭代数组 如下所示 var myArray a b c 我想知道是否有等效的对象属性迭代 即 var myObj propOne a propTwo b propThree c 我想要一个可以让我输出的模板 ul
  • 使用 Knockout-Kendo.js 动态启用/禁用 kendo 日期选择器

    我正在尝试使用 Knockout Kendo js 根据选择的选定值启用 禁用 kendo 日期选择器 HTML
  • 如何使用淘汰赛映射插件添加新项目

    我正在尝试一个淘汰制图样本 我想我已经快完成了 我似乎无法向 viewModel foos 添加新的 Foo 谁能看到我在这里错过了什么 var Foo function data var self this self id data id
  • 单击鼠标更改 Knockout.js 中的 css 类

    Knockout js 文档显示了这样的 css 绑定 div Profit Information div 我需要对其进行调整以更改鼠标单击时的 css 类 我怎样才能做到这一点 根据下面的答案 我正在使用这样的代码 CSS class
  • 为什么我不能在淘汰赛中将数据连接到可观察数组

    我正在尝试将服务器中的元素添加到淘汰赛中的可观察数组中 这是我的视图模型 function ArticlesViewModel var self this this listOfReports ko observableArray self
  • KnockoutJS JQuery 组合框绑定

    我想为淘汰赛制作一个绑定 它使用JQuery 自动完成组合框 http jqueryui com demos autocomplete combobox并允许 2 路绑定 http jsfiddle net rniemeyer PPsRC
  • $root 和 $parent 有什么区别?

    我正在学习 KnockoutJS 但我不明白两者之间的区别 root and parent用法 请参见这个jsfiddle http jsfiddle net supercool 2gt4K 27 或下面的代码 div data Value
  • Knockback.js 生产准备好了吗? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • KnockoutJS - 打印迭代索引作为输入名称

    我正在尝试结合 Spring MVC 创建我的第一个 KnockoutJS 表单视图 ModelAttribute捆绑 数据通过 Ajax 加载并使用 KnockoutJS 填充 通过 KnockoutJS 添加数据 通过 Ajax 和 K
  • 使用knockout js实现html5拖放照片,durandal 2.0

    我在淘汰赛 js 视图模型中有一个照片列表 我希望能够在它们之间交换 实际上更正确的术语是将一张复制到另一张上面 这是我的简化视图模型 define durandal app knockout jquery function app ko
  • 使用Knockout将不同模型绑定到页面上的不同部分

    我在我的 asp net 应用程序中使用淘汰赛 javascript 库 对于淘汰赛我使用ko对象和应用绑定 方法来绑定它 现在我想将两个淘汰对象绑定到两个不同的用户界面部分 我如何使用第二个淘汰对象或第二个数据源 以便我可以在第二部分中使
  • 敲除验证

    我有一个 asp net mvc3 项目 我在其中使用淘汰赛绑定对表进行批量编辑 我想在保存数据时进行必需验证和数字验证等验证 有没有更简单的方法来进行淘汰验证 PS 我没有使用表格 看一下敲除验证 https github com eri
  • 使用 Knockout 使用多个字段/列和控件来过滤 ViewModel 数据

    我是 KnockoutJS 的新手 但到目前为止我很喜欢它 我想做的是使用表单上的多个字段 列和控件来过滤我的视图模型的数据 但我不知道该怎么做 让我 希望 进一步解释一下 我有一个 viewmodel 可观察的数据数组 其中填充了来自后端
  • 重新评估仅依赖于可观察数组的淘汰赛计算

    我的 Appmodel 由一系列可观察的评论组成 self comments ko observableArray Default Value is an empty array Here comes some code to initia
  • 淘汰赛绑定,每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div
  • Knockout.js 安全绑定

    我想使用带有淘汰赛的安全绑定 为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用 它会抛出一个错误 未捕获 淘汰 安全
  • 过滤表内容

    我正在寻找实现一个绑定来搜索 HTML 表 我考虑过实现自定义绑定并利用 jQuery 来完成繁重的工作 自定义绑定方面是为了使其在我的解决方案中普遍可访问 我当前的解决方案仅由 jQuery 组成 不使用任何 KnockoutJS 功能
  • KnockoutJS fromJS 不起作用 TypeError:无法调用未定义的方法“fromJS”

    我使用knockoutJS 当我使用 fromJS 时出现以下错误 类型错误 无法调用未定义的方法 fromJS 我的 JavaScript 代码
  • 使用 KnockoutJS 映射插件执行部分更新

    现在 我将这个 JSON 与 KO 映射插件一起使用 并且工作正常 Controls Fields Name emailField Text email Visible true Name hiddenField Text text Vis

随机推荐