knockout.js 将表单加载到 viewModel 中

2024-04-02

我目前正在成功使用 knockout.js 来处理应用程序中的所有数据绑定。但是,在每个页面加载时,在我的 document.ready 中,我正在执行初始异步数据加载,如下所示:

$(document).ready() {
  getData()
});

但是,是否可以将数据加载到表单中(使用 ASP.NET MVC2),然后根据数据绑定标签将数据反向加载到视图模型中?

我觉得这不行,我只是想确认一下我没有做任何不当的事情。


“值”绑定最初将元素的值设置为视图模型中的值,所以不会。但是,您可能可以将“值”绑定的代码复制到您自己的处理程序中,该处理程序最初根据控件上的值设置模型值。下载调试版本 http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js淘汰赛,并寻找ko.bindingHandlers['value'] = {online 2182. 复制此绑定处理程序声明并将“value”更改为其他内容,然后在 init 末尾添加对 valueUpdate Handler() 的调用:

ko.bindingHandlers['myvalue'] = {
    'init': function (element, valueAccessor, allBindingsAccessor) {
        // skipping code
        valueUpdateHandler(); // update model with control values
    },
    'update': function (element, valueAccessor) {
        // skipping code
    }
};

现在,当您使用 myvalue 绑定时,您的模型将使用初始绑定时的控制值进行更新:

<input type="text" data-bind="myvalue: name"></input>

或者,您可以调用原始值而不是复制所有代码,只需在 init 之后添加 valueUpdateHandler 中的代码:

ko.bindingHandlers['myvalue'] = {
    'init': function (element, valueAccessor, allBindingsAccessor) {
        // call existing value init code
        ko.bindingHandlers['value'].init(element, valueAccessor, allBindingsAccessor);

        // valueUpdateHandler() code
        var modelValue = valueAccessor();
        var elementValue = ko.selectExtensions.readValue(element);
        ko.jsonExpressionRewriting.writeValueToProperty(modelValue, allBindingsAccessor, 'value', elementValue, /* checkIfDifferent: */ true);
    },
    'update': function (element, valueAccessor) {
        // call existing value update code
        ko.bindingHandlers['value'].update(element, valueAccessor);
    }
};

如果您不想使用 AJAX,您始终可以通过将模型序列化为 JSON(razor 语法)来将值放入 javascript 中:

<script type="text/javascript">
var model = @(new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model)));
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

knockout.js 将表单加载到 viewModel 中 的相关文章

随机推荐

  • 使用 VSTO 将数据加载到 Microsoft Project 时如何提高性能

    背景 我们有一个现有的应用程序 可以将数据加载到 Microsoft Project 中 以便可以由 MS Project 进行操作 原始应用程序是由 VB6 编写的旧式 COM 项目加载项 针对 MS Project 2003 2007
  • 启用 SSL 刷新 URL 时出现 React-router 问题

    目前 我在使用 React router 的 BrowserHistory 和 nginx 代理转发请求时遇到问题 我读过以下答案 React router url 在刷新或手动写入时不起作用 https stackoverflow com
  • Ninject:每个被拦截的类实例有一个拦截器实例?

    我目前遇到一个问题 尝试为每个被拦截的类实例连接一个拦截器实例 我正在 InterceptorRegistrationStrategy 中创建 Advice 并设置回调以解析来自内核的拦截器 它有一个注入构造函数 请注意 我只能在回调中实例
  • 即使没有来自客户端的连接,选择器也会无限循环

    我是 Java NIO 的新手 在阅读了一些教程后 我尝试自己编写一个简单的 NIO 服务器和客户端 我的服务器只做了一件简单的事情 就是从客户端监听并打印到控制台 客户端只需连接到服务器并向其发送 3 条消息 Hello 问题是我的服务器
  • .NET / C# 拼写检查器

    有人知道 C NET 的多语言拼写检查器吗 我的意思是 我有它和我找到了一些替代方案 但是有人有一个很好的成功故事吗 我需要在我的应用程序中添加拼写检查器 我想要一个集成的库System Windows Forms TexBox 例如 另外
  • 使用 std::codecvt_xxx 将 C++ std::wstring 转换为 utf8

    C 11有转换宽字符字符串的工具std wstring从 到 utf8 表示 std codecvt std codecvt utf8 std codecvt utf8 utf16 etc Windows 应用程序可使用哪一个来转换常规宽字
  • C++ 向量大小类型

    我刚刚开始学习 C 有一个关于向量的问题 我正在读的书指出 如果我想提取 double 类型向量的大小 例如 我应该这样做 vector
  • 为什么不能在 switch 语句中声明变量?

    我想了解更多关于 为什么不能在 switch 语句中声明变量 https stackoverflow com questions 92396 why cant variables be declared in a switch statem
  • 显示为“n”、“p”或“f”的小数字

    我正在使用绘图来绘制一些数据 小数字 我看到奇怪的格式 例如78 98p 576 65n 678 76f 这些F是什么 没有任何地方解释这些是什么 我怎样才能把它们变成带有 E 的科学记数法 看到这个https plot ly python
  • Visual Studio 代码:缺少 X509Certificate2UI

    尝试使用时出现以下错误X509Certificate2UI在 VS 代码中 命名空间 System Security Cryptography X509Certificates 中不存在类型或命名空间名称 X509Certificate2U
  • 递归的优点和缺点是什么?

    关于在排序算法中使用递归而不是非递归方法 或者就此而言 任何算法的优点和缺点是什么 大多数情况下 递归速度较慢 并且占用更多堆栈 递归的主要优点是 对于像树遍历这样的问题 它使算法变得更容易或更 优雅 看看一些比较 link http pa
  • Oracle 是否存储 Number 数据类型的尾随零?

    当我在表中存储数值并在 SQL Developer 中查询该表时 它没有显示数字数据类型的尾随零 create table decimal test decimal field number 10 insert into decimal t
  • 使用强化学习训练神经网络

    我了解前馈神经网络的基础知识 以及如何使用反向传播算法训练它们 但我正在寻找一种可以用于通过强化学习在线训练 ANN 的算法 例如 车杆向上摆动 http www google com search q cart 20pole 20swin
  • 带有子项的 ViewComponents

    我可以在这样的页面中使用 ViewComponents 吗
  • 将 CSV 数据导入 Google 表格

    当尝试使用IMPORTDATA该文件的函数 https www kaggle com stefanoleone992 fifa 20 complete player dataset players 20 csv https www kagg
  • JSF 获取托管 bean 中的当前操作

    当用户点击任意一个commandButton 然后在托管bean中调用相应的操作 是否可以从以下位置获取此操作名称 PostConstruct方法还是来自事件监听器方法 按钮的名称 值对本身可作为 HTTP 请求参数以通常的方式使用 想象一
  • 为什么我的 MVC3 Intranet 站点 Windows 身份验证在发布时不起作用

    我们有一个使用 MVC3 和实体框架的简单 Intranet 站点 一切正常 可以在 Visual Studio 中进行调试 当我将站点发布到本地盒子 IIS7 5 Web 服务器或同一域上的开发盒子时 系统会提示我输入用户名和密码 但它不
  • JS中如何获取对象数组的特定属性?

    我有以下代码和测试数据 const getNestedObject nestedObj pathArr gt return pathArr reduce obj key gt return obj obj key undefined obj
  • Visit_Psych_Nodes_Alias:未知别名:默认(Psych::BadAlias)

    我从 ruby 2 7 1 更新到 3 1 1 然后删除 Gemfile lock 并运行bundle update 它位于开发分支上 所以如果这是一个坏主意我可以扔掉它 我只是想看看它是否有效 bundle update成功了 但是当我启
  • knockout.js 将表单加载到 viewModel 中

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