在淘汰赛部分MVC4结合意见 [英] Knockout binding in MVC4 partial views

问题描述

总之，我相信以后我是一种方法，提供范围/背景淘汰赛绑定/ JavaScript的中MVC4局部视图对象，这样我就可以重复使用相同的部分，而不需要互相干扰，但仍能够引用在客户端父子的ViewModels。

In short, what I believe I'm after is a way to provide scope/context to knockout bindings/javascript objects in MVC4 partial views, so that I can reuse the same partial without having them interfere with each other, but still be able to reference parent child viewmodels on the client side.

这很可能是一个淘汰赛小白（真正的web开发更广泛的）我在这里缺少一个常见的​​JavaScript概念的模式，但我快到场景很像以下。我有服务器上的视图模型，让我们这样说：

It's very possible as a knockout noob (and really web dev more broadly) I'm missing a common javascript concept pattern here, but the scenario I'm running into is much like the following. I have a viewmodel on the server, let's say something like:

public class MainModel 
{
    // Other fields 

    SubviewModel Subview { get; set}
}

public class SubviewModel 
{
    // Relevant subview fields
}

然后在强类型（主）局部视图渲染我什么，我需要，并通过子视图模型转换成通过@ Html.Action一个强类型的部分（在服务器上）。在这两种情况下，我做这样的事情建立淘汰赛：

And then in the strongly typed (main) partial view I render whatever I need, and pass the subview model into a strongly typed partial (on the server) via @Html.Action. In both cases, I'm setting up the knockout by doing something like this:

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

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

在这种情况下，divSubview将是局部的主包装DIV和一般的一切结合得很好 - 差不多。

In this case divSubview would be the main wrapper div for the partial and everything generally binds just fine - almost.

的Model.Guid级联有解决的第一个问题，这是这些的partials通常呈现几个为不同的ViewModels一个页面上。 （你可以把它作为一个项目列表，待办事项列表，或诸如此类的东西，每个项目都有subcontent可能会改变 - 你的想法，可能是之前我试图进一步解释......）所以当多个谐音呈现在同一页面上如果DIV不是唯一命名的，如果我通过打电话的document.getElementById applyBindings，我最终将第二视图模型与该名称的第一个呈现DIV。

The Model.Guid concatenation is there to address the first problem, which is that these partials are generally rendered several on a page for different viewmodels. (Think of it as a list of items, a todo list or whatnot, where each item has subcontent that could change - you get the idea, probably before I attempted to explain further...) So when multiple partials render on the same page, if the div is not uniquely named, if I call applyBindings via document.getElementById, I end up applying the second viewModel to the first rendered div with that name.

当我呈现的主要部分（其中有一个给定的网页倍数）第二个问题是相关的，在这一点，那么子视图中，我常常要引用无论是在子视图或同样的主视图模型。我一直在使用的解决办法是只设置了一个名为全局参数，然后使用重新引用/来回，因为我知道脚本将按顺序执行 - 而这是相当哈克。

The second problem is related, in that when I render the main partial (which there are multiple of for a given page), and then the subview, I often want to refer to either the main viewmodel in the subview or likewise. The workaround I've been using is just setting a named global parameter, and then using that to refer back/forth since I know the script will execute in sequence - but that's quite hacky.

那么，什么是我缺少合适的解决方案？

So what's the right solution I'm missing?

我知道我可以只用淘汰赛的模板和一个更大的视图模型，最终可能是正确的解决方案，但现在有一个很大的MVC谐音（紧密耦合到服务器）怎么回事，我不是愿意放弃。 （其次，我试图保持谐音为现在松耦合尽可能 - 在客户机上至少有 - 即使我走位性能达到上绑定的/ etc）

I know I could just use Knockout's templates and one larger viewmodel, and ultimately that might be the right solution, but for now there's a great deal going on in the MVC partials (tightly coupled to the server) that I'm not willing to give up. (And secondarily I'm trying to keep the partials as loosely coupled as possible for now - on the client at least - even if I'm taking a bit of a performance hit on the binding/etc.)

什么（我认为）我真的是后通过某种形式的范围，以谐音的方式，这样子视图部分将不得不主要部分视图模型的引用（同样地），而无需污染全局命名空间或使用唯一的名称。有我的方式说表示，将在子/父谐音一个对象的引用的客户端JS变量？ （还是我完全错过了点，有一个更好的办法吗？）

What (I think) I'm really after is a way to pass some form of scope to the partials, so that subview partial will have a reference to the main partial viewmodel (and likewise) without having to pollute the global namespace or use unique names. Is there a way for me to say denote a client side JS variable that would have a reference to an object in the child/parent partials? (Or am I missing the point completely and there's a far better way?)

推荐答案

长期难道真的可能是最好的硬着头皮使用映射插件，顶级的JSON重新presentation的经典组合渲染到页面初始化视图模型和模板子视图模型。但是，我理解你的痛苦重新现有的MVC部分逻辑，所以......

Long term it really might be best to bite the bullet and use the classic combination of the mapping plugin, a JSON representation of the top-level view model rendered into the page to initialize with, and templates for sub view models. But I understand your pain re existing MVC partial logic, so......

您目前呈现一个单独的脚本块每个子部分的视图的一部分来创建其击倒视图模型，并运用其绑定？

Are you currently rendering a separate script block as part of each sub partial's view to create its Knockout view model and apply its bindings?

你能不能逃脱一个单一的结合上下文，并定义该公司拥有顶级视图模式，并加入到它的子视图模型增量作为子谐音呈现页面某种模块，然后在底部页面上DOM准备，申请绑定？

Could you not get away with a single binding context and define some kind of module in the page which owns the top-level view model and has its child view models added to it incrementally as the sub partials render, then at the bottom of the page, on DOM ready, apply the bindings?

所以，每个子部分的脚本块会打个电话到一些功能，你的模块传递子模型的原始JSON，其中包括其GUID键。你的模块，然后创建子视图模型的新实例，并设置父视图模型里面的引用，并将其推到子视图模型的父视图模型可观察到的数组。然后，你有一个参考每个方法。

So, each sub partial's script block would make a call into some function on your module passing in the sub model's raw JSON, which includes its Guid key. Your module then creates a new instance of the sub view model and sets the parent view model as a reference inside it, and pushes it into an observable array of sub view models on the parent view model. Then you have a reference each way.

我不知道，你可以得到周围有某种页面级经理的这种结构（如果这就是你所不污染全局命名空间的意思）。在任何情况下，是不是件好事，这些局部视图模型全部由一个单一的对象所拥有的，而不是浮在全局命名空间？ （如果它们是）

I'm not sure that you can get around having some kind of page level manager for this structure (if that's what you meant by not polluting the global namespace). In any case, isn't it good to have these partial view models all owned by a single object rather than floating in the global namespace? (if they are)

希望我正确理解上下文。

Hope I understand your context correctly.

更新：您的谐音仍然会在一定意义上是松耦合。在标记的结合前pressions显然必须涉及一种子视图模型的一个实例，但可能要么是通过一个foreach上的待办事项列表项或任何链向下一个数据上下文，或显式使用设置与EX pression，例如：与someOtherModule.randomStandaloneSubViewModel

UPDATE: Your partials would still be loosely coupled in a sense. The binding expressions in the markup would obviously have to relate to an instance of a sub view model, but that could either be a data context chained down through a foreach on your todo list items or whatever, or explicitly set using the "with" expression, e.g. with someOtherModule.randomStandaloneSubViewModel

这篇关于在淘汰赛部分MVC4结合意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！