使用 Knockout-ES5 时如何访问自定义绑定中的可观察量

2024-01-04

如果模型属性是 ko.observable(),则可以在自定义绑定中按如下方式访问这些属性。

var observable = valueAccessor();

使用 Knockout-ES5 插件时,如何在自定义绑定中获取可观察值?检查下面的代码并查找注释“如何在此处获取 propertyName?”

不使用 Knockout-ES 插件时的 JS Fiddle http://jsfiddle.net/rniemeyer/X82aC/礼貌地再看看 KnockoutJS 的自定义绑定 http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html

更新了模型的小提琴,更改为使用 Knockout-ES 插件 http://jsfiddle.net/xb6vR/

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            if (!ko.isObservable(observable)) {                
                console.log("Not Observable");
                //How to get propertyName here?
                //ko.getObservable(viewModel, 'propertyName');
                return;
            }
            observable($(element).datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).datepicker("destroy");
        });

    },
    //update the control when the view model changes
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);   
        }
    }
};

var viewModel = {
    myDate: new Date("11/01/2011"),
    setToCurrentDate: function() {
       this.myDate = new Date();   
    }
};

ko.track(viewModel);

ko.applyBindings(viewModel);

您可以将实际的可观察值传递给绑定:

data-bind="datepicker: ko.getObservable($data, 'myDate') ..."

http://jsfiddle.net/xb6vR/1/ http://jsfiddle.net/xb6vR/1/

但这很难看。幸运的是,Knockout 确实提供了一种从绑定写入属性值的方法(未记录):

//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
    var writable = valueAccessor();
    if (!ko.isObservable(writable)) {                
        var propWriters = allBindingsAccessor()._ko_property_writers;
        if (propWriters && propWriters.datepicker) {
            writable = propWriters.datepicker;
        } else {
            return;
        }
    }
    writable($(element).datepicker("getDate"));
});

http://jsfiddle.net/xb6vR/3/ http://jsfiddle.net/xb6vR/3/

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

使用 Knockout-ES5 时如何访问自定义绑定中的可观察量 的相关文章

  • 从.ajax()调用加载knockout.js observableArray()

    这让我很困惑 这一定是我没看到的小事 我正在尝试加载一个非常简单的observableArray通过 ajax 调用进行淘汰赛 javascript we bind the array to the view model property
  • Internet Explorer 中的淘汰赛验证错误?

    在我的剃刀观点中 使用knockout http knockoutjs com据说敲除验证 https github com ericmbarnard Knockout Validation我添加以下行 以实际开始使用 ko 验证 Scri
  • 简单的演示项目 Webpack KO(带有组件) javascript

    我想用 javascript 淘汰组件构建 SPA 经过大量阅读和摆弄之后 我似乎仍然无法使用 webpack 获得一个可用的 javascript 无打字稿 淘汰 带组件 项目 我发现了一些简单的淘汰项目 但无法让它们与 webpack
  • 我可以对每个对象属性执行 jquery-tmpl 吗

    模板 each 指令非常适合迭代数组 如下所示 var myArray a b c 我想知道是否有等效的对象属性迭代 即 var myObj propOne a propTwo b propThree c 我想要一个可以让我输出的模板 ul
  • 何时使用 ko.utils.unwrapObservable?

    我使用 KnockoutJS 编写了一些自定义绑定 我仍然不确定何时使用ko utils unwrapObservable item 查看代码 该调用基本上检查是否item是一个可观察的 如果是 则返回value 如果不是 则返回value
  • JSON.stringify 使用 Knockout JS 变量的对象

    当前场景 function Employee data var self this variables this Forename ko observable data Forename this Surname ko observable
  • 条件验证不适用于匿名淘汰赛验证规则

    我的视图模型中有以下属性 它们使用淘汰验证 其中之一是自定义验证来检查密码匹配 model Password ko observable extend required message Password is required params
  • 单击鼠标更改 Knockout.js 中的 css 类

    Knockout js 文档显示了这样的 css 绑定 div Profit Information div 我需要对其进行调整以更改鼠标单击时的 css 类 我怎样才能做到这一点 根据下面的答案 我正在使用这样的代码 CSS class
  • 未捕获的语法错误:实时但不在本地服务器上出现意外的令牌 B

    所以我正在制作一些ajax帖子 它似乎在本地主机上工作正常 但是当我将其发布到亚马逊上的ec2服务器时 我得到 Uncaught SyntaxError Unexpected token B 这似乎表明 JSON 解析失败 完全相同的数据库
  • ko.utils.arrayFirst 在不处理非空字符串的 else 块时始终返回 null

    这可以正确工作 self getById function id return ko utils arrayFirst self PostArray function item if item postId id return item e
  • knockout.js 将表单加载到 viewModel 中

    我目前正在成功使用 knockout js 来处理应用程序中的所有数据绑定 但是 在每个页面加载时 在我的 document ready 中 我正在执行初始异步数据加载 如下所示 document ready getData 但是 是否可以
  • Knockout无法识别手动点击

    这是样本http jsfiddle net HhXGH 57 http jsfiddle net HhXGH 57 我正在通过 jquery 单击单选按钮 但 knockout js 无法识别它 它仍然显示第一个单击的值 p Send me
  • knockoutjs 中的滑动动作绑定

    我在我的应用程序中使用淘汰赛作为主要框架 它必须支持平板电脑和移动设备 由于框架是基于绑定处理程序构建的 我想知道如何实现对操作 如滑动和其他特定于设备的操作 的自定义绑定 或者也许有类似的事情完成 可能为时已晚 但这里有一个库 将触摸绑定
  • KnockoutJS - 打印迭代索引作为输入名称

    我正在尝试结合 Spring MVC 创建我的第一个 KnockoutJS 表单视图 ModelAttribute捆绑 数据通过 Ajax 加载并使用 KnockoutJS 填充 通过 KnockoutJS 添加数据 通过 Ajax 和 K
  • 如何检查淘汰赛中的包含

    我正在使用淘汰赛 我有一个 html 页面 我想在其中检查具有某些值的字符串 就像我有一个字符串 A B C D F G H I 一样 我只想用剔除 if 检查 html 中的这个字符串 模型 var viewModel function
  • 如何让 ko.compated 处理对象内的可观察值

    我有一个相当简单的视图模型来保存数据数组并获取一个我想用来过滤数据的字符串 我有一些非常简单的标记来渲染它 如下所示 section class task list ul li li ul section
  • Typescript 中此子范围的问题

    This is ALMOST和其他人一样this到目前为止 我已经读过范围界定问题 除了一个细微的差别之外 这使得提出这个问题变得有意义 imo 现在最初我的问题是范围this使用 Knockout 和 Typescript 因此给出以下内
  • 如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel?

    在我的 MVC 项目中 我有一个与 Knockout 绑定的 HTML 表 我正在尝试将表格导出到 Excel 我在客户端尝试使用 JavaScript self exportToExcel function javascript wind
  • 淘汰赛:自定义绑定处理程序上的 valueAccessor 与 viewModel?

    通过绑定属性 通过 valueAccessor 访问视图模型的值与从传递给处理程序的 init 和 update 的 viewModel 参数获取它们之间有什么区别 我一直认为答案是那些链接到 valueAccessor 的模型属性会自动设
  • 使用淘汰赛动态显示/隐藏元素

    我有一个表 有四列 即代码 名称 数量和价格 其中 我想动态更改数量列的内容 元素 通常 它应该显示其中显示数量的元素 当用户单击元素时 我想显示该元素 以便用户可以编辑数量 我正在尝试按照 示例2 来实现淘汰赛文档链接 http knoc

随机推荐

  • QToolTip 中包含的变量不会自动更新

    我在 QLineEdit 上有一个 QToolTip 并且工具提示包含文本中的变量 工具提示代码包含在 init h 文件中 问题是工具提示中的变量值在程序运行中发生更改时不会自动更新 例如 我将鼠标悬停在行编辑上 值会显示在工具提示中 我
  • 在 JavaScript 中为属性添加别名

    我认为这很简单 有没有一种简单的方法来添加属性的辅助名称 我认为这是特定于字符串的 我不确定 即 c length this line pseudo code hello world length returns 11 hello worl
  • Scala Slick 2 加入多个字段?

    如何在多个字段上进行连接 如下例所示 val ownerId 1 val contactType 1 val contact for t c lt ContactTypes leftJoin Contacts on id typeId ow
  • XCode 4 与 Git/Github 无法提交图像

    源代码文件已提交 但图像未提交 错误信息 错误 pathscpec 与 git 已知的任何文件都不匹配 XCode 发行说明提到现在提交二进制文件存在问题 他们建议 在收到该错误后 您应该转到命令行并执行 git commit
  • JavaScript同步执行

    我是 javascript 新手 正在尝试使用滑块 我的问题类似于以下问题jquery attr 带回调 https stackoverflow com questions 4040712 jquery attr with callback
  • 在 Azure SQL DB 中启用和配置 FILESTREAM

    如何在 AZURE SQL DB 中存储 PDF 文件 上述要求我在 Azure SQL DB 上启用和配置 FILESTREAM 目前 当我运行创建表查询时出现此错误 Msg 40517 Level 16 State 1 Line 28
  • 数据列表分页?

    我有一个包含动态内容的数据列表 我需要启用对此数据列表的分页 我在 Visual Studion 2010 下使用 asp net c 请向我发送如何启用对数据列表分页的代码 这是数据列表的代码
  • 第一次偶然异常发生在 XMLSerializer 的构造函数中[重复]

    这个问题在这里已经有答案了 可能的重复 XmlSerializer 在构造函数中给出 FileNotFoundException https stackoverflow com questions 1127431 xmlserializer
  • Github - 分叉一个私人仓库

    我已被添加到一个拥有一些私有存储库的组织 我需要向他们发送包含一些更改的拉取请求 但我不知道是否可以 我在 GitHub 上没有付费帐户 那么如何分叉该私有存储库来修改和发送拉取请求 正如 如果我将其他人的私人 Github 存储库分叉到我
  • “VkVertexInputBindingDescription”中“绑定”的目的是什么?

    https www khronos org registry vulkan specs 1 0 man html VkVertexInputBindingDescription html https www khronos org regi
  • 记录 WCF 消息大小

    我正在使用 WCF 通过网络发送一些 Linq 对象 我想使用消息日志记录或跟踪来记录消息大小 然而我不想 或者没有能力使用配置文件来设置它 我正在努力弄清楚如何以编程方式执行此操作 我不在乎这是否发生在客户端主机上 我控制两者 有人有这样
  • Perl Cwd::cwd 和 Cwd::getcwd 函数有何不同?

    问题 有什么区别Cwd cwd and Cwd getcwd一般来说 在 Perl 中 不考虑任何特定平台 为什么 Perl 两者兼而有之 预期用途是什么 在什么场景下应该使用哪一种 我们将不胜感激示例用例 这重要吗 假设我不混合它们 选择
  • 安全 Rust 中可能存在未定义行为吗?

    有没有什么方法可以在不使用 Rust 的情况下实现未定义的行为unsafe 当然 此类行为可以由第三方库包装在 安全 函数中 因此我们假设我们仅使用标准函数 绝对可以 但是任何此类情况都是 Rust 或标准库的错误 https github
  • 如何获取列表中列表的索引?

    list word1 word2 word3 print list index word1 这很好用 但我如何获得这个的索引 list word1 word2 word3 word4 word5 word6 print list index
  • 重新启动auditd服务会出现依赖错误

    我正在尝试为 docker 守护进程配置审核 如下所示 将下面的行添加到 etc audit audit rules file w usr bin dockerd k docker 然后 使用以下命令重新启动审核守护程序 service a
  • 使用 IB 调整大小构建自定义 UITableViewCell?

    我已确保单元格的自动调整大小蒙版允许灵活的宽度 但当设备旋转时 单元格的大小不会调整 我还验证了表格视图已调整大小 问题直接出在单元格上 这是我用来创建单元格的代码 if cell nil Load the top level object
  • 带系统函数的 C 程序中的大括号扩展

    我尝试了命令 cat tmp file 1 3 gt newFile 并且工作完美 但是当我编译并执行以下c程序时 include
  • 在最新的 Ember 中,如何仅使用模型的 id/名称链接到路由,而不是在链接页面中提供其所有属性?

    从 Ember 1 0 pre2 转换到最新的 master 时我遇到了问题 43354a98 https github com emberjs ember js commit 43354a98a5e441095132b1407f3e1f4
  • 在 React Native 中导入图形工具包会导致错误 500

    我正在使用最新版本的Expo 我创建了一个项目expo init my project并添加了React Native 图表套件 https github com indiespirit react native chart kit 这是p
  • 使用 Knockout-ES5 时如何访问自定义绑定中的可观察量

    如果模型属性是 ko observable 则可以在自定义绑定中按如下方式访问这些属性 var observable valueAccessor 使用 Knockout ES5 插件时 如何在自定义绑定中获取可观察值 检查下面的代码并查找注