javascript - MVC4 局部 View 中的 knockout 绑定(bind)

标签 javascript knockout.js asp.net-mvc-4

简而言之,我相信我所追求的是一种为 MVC4 局部 View 中的 knockout 绑定(bind)/javascript 对象提供范围/上下文的方法,这样我就可以重用相同的局部 View 而不会相互干扰,但仍然能够在客户端引用父 subview 模型。

这很可能是一个 knockout 新手(更广泛地说,实际上是网络开发人员)我在这里缺少一个常见的 javascript 概念模式,但我遇到的情况与以下情况非常相似。我在服务器上有一个 View 模型,假设是这样的:

public class MainModel 
{
    // Other fields 

    SubviewModel Subview { get; set}
}

public class SubviewModel 
{
    // Relevant subview fields
}

然后在强类型(主)部分 View 中呈现我需要的任何内容,并通过@Html.Action 将 subview 模型传递到强类型部分(在服务器上)。在这两种情况下,我都通过执行以下操作来设置 knockout :

var mvcModel = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(this.Model)));

ko.applyBindings(mvcModel , document.getElementById("@("divSubview"+Model.Guid)"));

在这种情况下,divSubview 将是部分的主要包装 div,并且所有内容通常都绑定(bind)得很好 - 几乎。

Model.Guid 串联是为了解决第一个问题,即这些部分通常在页面上针对不同的 View 模型呈现多个。 (把它想象成一个项目列表,一个待办事项列表或诸如此类的东西,其中每个项目都有可以改变的子内容 - 你明白了,可能在我试图进一步解释之前......)所以当多个部分呈现在同一个页面上时,如果 div 没有唯一命名,如果我通过 document.getElementById 调用 applyBindings,我最终会将第二个 viewModel 应用到具有该名称的第一个呈现的 div。

第二个问题是相关的,因为当我呈现主要部分(对于给定页面有多个部分),然后是 subview 时,我经常想在 subview 中引用主视图模型或类似的。我一直在使用的解决方法是设置一个命名的全局参数,然后使用它来回引用,因为我知道脚本将按顺序执行——但这很老套。

那么我缺少的正确解决方案是什么?

我知道我可以只使用 Knockout 的模板和一个更大的 View 模型,最终这可能是正确的解决方案,但现在 MVC 部分(与服务器紧密耦合)中有很多我不是愿意放弃。 (其次,我现在正尝试让部分尽可能松散地耦合 - 至少在客户端 - 即使我在绑定(bind)/等方面受到一些性能影响。)

(我认为)我真正想要的是一种将某种形式的范围传递给局部 View 的方法,这样 subview 局部 View 将具有对主要局部 View 模型的引用(同样),而不必污染全局命名空间或使用唯一名称。有没有办法让我说表示一个客户端 JS 变量,该变量将引用子/父部分中的对象? (或者我是否完全忽略了这一点并且有更好的方法?)

最佳答案

从长远来看,最好硬着头皮使用映射插件的经典组合、呈现到页面中以进行初始化的顶级 View 模型的 JSON 表示,以及 subview 模型的模板。但我理解你对现有 MVC 部分逻辑的痛苦,所以......

您目前是否正在渲染一个单独的脚本 block 作为每个子局部 View 的一部分以创建其 Knockout View 模型并应用其绑定(bind)?

你能不能摆脱单一的绑定(bind)上下文,并在页面中定义某种模块,它拥有顶级 View 模型,并在子部分呈现时逐渐添加其 subview 模型,然后在底部页面的 DOM 就绪,应用绑定(bind)?

因此,每个子部分的脚本 block 都会调用模块上的某个函数,传递子模型的原始 JSON,其中包括其 Guid 键。然后,您的模块创建 subview 模型的新实例并将父 View 模型设置为其中的引用,并将其推送到父 View 模型上的 subview 模型的可观察数组中。然后你就有了每一种方式的引用。

我不确定您是否可以为此结构设置某种页面级管理器(如果这就是不污染全局 namespace 的意思)。在任何情况下,让这些部分 View 模型都由单个对象拥有而不是 float 在全局命名空间中不是很好吗? (如果是的话)

希望我能正确理解你的上下文。

更新:从某种意义上说,您的偏音仍然是松耦合的。标记中的绑定(bind)表达式显然必须与 subview 模型的实例相关,但这可以是通过待办事项列表项上的 foreach 向下链接的数据上下文或其他任何内容,或者使用“with”表达式显式设置,例如与 someOtherModule.randomStandaloneSubViewModel

关于javascript - MVC4 局部 View 中的 knockout 绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13005031/

相关文章:

asp.net-mvc-4 - 如何跟踪对 IIS 的长时间运行调用?

c# - 如何解决 VS2012 中简单的 Nuget 安装导致 MVC4 Twitter Bootstrap 项目失败的问题?

c# - 用于模型绑定(bind)到字典的 HTML Helper

javascript - 在 props 中传递函数是未定义的

javascript - knockout : Mapping with multiple keys

javascript - 使用重叠搜索搜索重复子字符串的正则表达式

javascript - 如何在没有全局 viewModel 的情况下将点击处理程序绑定(bind)到 knockoutjs 中的模板?

javascript - 为什么 sort 给我随机排序(Knockout observable array)

javascript - 跳出一个JS变量封装

javascript - JSON 无法使用 Panini 加载