包括特定于 ASP.NET MVC4 视图或部分视图的脚本

Question

我查看了许多类似于How to add a script in a partial view in MVC4? 和MVC4 partial view javascript bundling Issue 的问题，但在涉及特定于视图的脚本时，我仍然难以理解 ASP.NET MVC 架构。对于其他试图在其 MVC4 部分视图中包含脚本的人来说，答案似乎是将脚本置于更高级别。但是某些脚本不能移动到更高的级别，它将在全球范围内运行。例如，我不想为未加载控件的视图模型运行应用 knockout.js 数据绑定的脚本。而且我不想在每次加载页面时为一大堆不活跃的视图运行一大堆脚本。

所以我开始在我的.vbhtml 视图中使用特定于视图的@Section Script 块来包含特定于视图的脚本。但是，正如其他人指出的那样，这在局部视图中不起作用。我正在对我们的架构进行原型设计，以了解我们可以在这里做什么和不能做什么。我想在某些情况下，我可能能够将视图用作局部视图，反之亦然。但是，当您拉入视图以用作局部视图时，@Section Script 块不会呈现。我已经设法以某种方式全局定义了我的所有视图模型脚本，这样我只需要运行一行代码来创建和绑定视图模型，但我仍然需要只有在特定视图处于活动状态时才运行那一行代码.在局部视图中哪里可以适当地添加这行代码？

ko.applyBindings(window.webui.inventoryDetailViewModel(ko, webui.inventorycontext));

我走在正确的道路上吗？这是构建 MVC 应用程序的正确方法吗？

编辑发现这个问题与我的问题密切相关，并且包含了我回答的重要部分：Can you call ko.applyBindings to bind a partial view?

Answer 1

This is the best you can do, 但仍有问题：

• 如果您的局部视图被缓存了怎么办？
• 如果使用 Ajax 渲染局部视图会怎样？

所以，我也建议不要使用这种 hacky 技巧。 （嗯，Darin Dimitrov 的解决方案很棒，但使用它不是一个好主意）。

最好的解决方案是让所有脚本在部分被重新渲染时都可用：

• 在连续页面中加载它们
• 动态加载它们（这更难）

如果您这样做，您可以在需要时运行这些脚本。但是，您如何仅在部分的所需部分上运行所需的脚本？更简单的方法是使用自定义 data- 属性标记它们。然后您可以“解析”页面，查找您的自定义 data- 属性，并运行适用的脚本：这是不显眼的 javascript。

例如，您可以在 jQuery 的 $(document).ready 上包含一个“解析”页面的脚本（当所有页面和所有脚本都完成加载时）。该脚本可以查找具有自定义data- 属性($('[data-my-custom-attr]').each( MyCustomSccript(this)); 的元素

您还可以考虑到data- 属性可用于配置您的脚本，即您可以使用属性来指示必须运行某种脚本，并使用额外的属性来配置脚本的运行方式。

那么，加载 ajax 的局部视图呢？没问题。我告诉过你可以使用$(document).ready，但你也有success 回调函数用于通过ajax 加载部分视图，你可以在这个回调函数上做同样的事情。您可以为 jQuery.Ajax 成功注册一个全局处理程序，因此您的脚本将应用于所有 ajax 加载的部分。

您甚至可以使用更强大的技术，例如根据属性的需要动态加载部分所需的脚本。

通常，问题在于我们认为 JavaScript 应该由服务器提供，但事实是 JavaScript 存在于浏览器中，浏览器应该对它有更多的控制权

动态加载脚本的架构描述：

• 主页：包含一个“解析器脚本”：这个解析器脚本负责：

  • 解析页面（文档就绪事件）或ajax下载部分（ajax成功事件）
  • 下载所需的脚本并将其存储在页面中的单例中（所需的由`data-'属性定义）
  • 运行脚本（存储在单例中）

• 部分

  • 他们在 DOM 元素上有 data-attributes，以便解析器知道需要哪些脚本
  • 他们有额外的data- 属性来传递额外的数据给脚本

显然，遵循良好的约定来命名脚本和data-attributes 非常重要，这样代码更易于使用和调试。

了解如何动态下载脚本的好地方是：On-demand JavaScript

有很多解决方案。其他选项：How can I dynamically download and run a javascript script from a javascript console?

您的脚本应该将自己附加到单例，就像您在定义 jQUery 插件时所做的那样。 .js 的内容是这样的：

if (!MySingleton.MyNamespace) MySingleton.MyNamespe = {};

MySigleton.MyNamespace.ScriptA = {
  myFunction: function($element) { 
    // check extra data for running from `data-` attrs in $element
    // run the script
  },
  scriptConfig: { opt1: 'x', opt2: 23 ... }
}

关于如何实现解析器的一点线索：

MySingleton = {
   parseElement = function(selector) {
       $(selector).find(`[data-reqd-script]`).each(
          function() {
            var reqdScript = $(this).attr('data-reqd-script');
            // check if Singleton contains script, if not download
            if (!MySingleton.hasOwnProperty(reqdScript)) {
            // donwload the script
            }
            // run the script on $(this) element
            MySingleton[reqdScript].myFunction($(this));
       });
   }
}

// Parse the page !!
$(document).ready(function() {
  MySingleton.Parse('body');
}

// You can also subscribe it to parse all downloaded ajax, or call it 
// on demand on the success of ajax donwloands of partial views

遵循正确的约定是绝对必要的，这样解析器才能运行必要的脚本。

要运行的函数的名称可以是另一个data- 属性，或者始终与init 相同。由于此函数可以访问 DOM 元素，因此它可以使用其他 data- 属性找到其他参数和选项。

这似乎很难实现，但是一旦你建立了一个工作框架，你就可以轻松地完成和改进它。

Answer 2

这是我编写视图模型和视图的方式：

// ~/scripts/app/viewModels/primaryViewModel.js
var primaryViewModelFactory = (function() {
    return { // this gives a singleton object for defining static members and preserving memory
        init: init
    }

    function init(values) {
        var model = {
            // initialization
            secondaryViewModel: secondaryViewModelFactory.init(values);
        }

        // I've decided to allow root-level view models to call apply bindings directly
        ko.applyBindings(model);
    }
}());

// ~/scripts/app/viewModels/secondaryViewModel.js
var secondaryViewModelFactory = (function() {
    return { 
        init: init
    }

    function init(values, target) {
        return = {
            // initialize object
        };
    }        
}());

在我的视图中，我的主模板中有一个脚本部分。所以我的观点是这样的：

@section scripts {
    <script src="~/scripts/app/viewModels/....js"></script>
    $(function() {
        var vm = primaryViewModel.init(@Html.Raw(Json.Encode(Model)); 
    });
}

事实上，我编写这些 MVVM 应用程序的次数越多，我就越倾向于使用 ajax 来加载数据，而不是将模型数据传递给 init 函数。这使我能够将init 调用移至工厂。那么你会得到类似的东西：

var primaryViewModelFactory = (function() {
    init();        

    function init(values) {
        var model = {
            // initialization
        }
        model.secondaryViewModel = secondaryViewModelFactory.init(values, model);

        // I've decided to allow root-level view models to call apply bindings directly
        ko.applyBindings(model);
    }
}());

这将我的视图脚本简化为一个简单的脚本标签：

@section scripts {
    <script src="~/scripts/app/viewModels/primaryViewModel.js"></script>        
}

最后，我喜欢在局部视图中为 vm 组件创建脚本模板，如下所示：

部分视图位于 ~/Views/Shared/ScriptTemplates/_secondaryViewModelTemplates.cshtml

<script src="@Url.Content("~/scripts/app/viewModels/secondaryViewModel.js")"></script>
<script id="secondary-view-model-details-readonly-template" type="text/html">...</script>
<script id="secondary-view-model-details-editor-template" type="text/html">...</script>
<script id="secondary-view-model-summary-template" type="text/html">...</script>

这里发生了一些事情。首先，导入相关的脚本。这可确保在渲染局部时包含必要的视图模型工厂脚本。这允许主视图对子组件（它可能有多个）的脚本需求保持无知。此外，通过在部分而不是在脚本文件中定义模板，我们还能够利用非常有用的 HtmlHelper 和 UrlHelper 以及您选择的任何其他服务器端实用程序。

最后，我们在主视图中渲染模板：

@section scripts {
    @* primaryViewModel has a dependency on secondaryViewModel so the order does matter *@
    @Html.Partial("ScriptTemplates/_secondaryViewModelTemplates.cshtml")
    <script src="~/scripts/app/viewModels/primaryViewModel.js"></script>
}

<div data-bind="template: {name: 'secondary-view-model-details-editor-template', with: secondaryViewModel}"></div>

代码很多，而且都是用 SO 编写的，所以可能会有一些错误。在过去的几年里，我一直在发展这种风格的 MVVM+MVC 架构，它确实在我的开发周期中得到了改进。希望这也对您有益。我很乐意回答任何问题。

Answer 3

现有的答案不够详细，所以请允许我用代码提供详细的答案。我主要遵循 JotaBe 的回答的建议，这就是具体方法。

首先，我为我将使用的自定义（“数据”）属性设计了一个方案，并创建了一个辅助函数以帮助我与 ASP.Net 捆绑兼容的方式应用它。在打开捆绑优化 (BundleTable.EnableOptimizations = True) 时，该属性需要提供下载单个捆绑文件所需的信息，否则需要提供几个独立文件。您可以在下面代码的 cmets 中看到我为 data-model 属性确定的格式。这段代码进入了一个名为 Helpers.vbhtml 的文件，该文件被添加到我的主项目中的一个新文件夹 App_Code 中。

App_Code/Helpers.vbhtml

@*
    Purpose:       Retrieve a value for the WebUI-specific data-model attribute which will
                   apply knockout bindings for the current node based on the specified
                   bundle, factory, and context.
    BundleNameUrl: Bundle URL like "~/bundles/inventory"
    FactoryName:   Client side factory class of the view model like "inventoryViewModel"
    ContextName:   Client side context object that provides methods for retrieving
                   and updating the data fromt he client, like "inventorycontext"
    ForceNew:      If True, a new instance of the view model will always be created;
                   If False, a previously created instance will be reused when possible.
    Output:        In debug mode, the escaped (") version of a string like
                   {"bundle": "~/bundles/inventory", "sources": ["/Scripts/app/inventory.datacontext.js",
                    "/Scripts/app/inventory.model.js","/Scripts/app/inventorydetail.viewmodel.js",
                    "/Scripts/app/inventory.viewmodel.js"], "factory": "inventoryViewModel",
                    "context": "inventorycontext", "forceNew": false}
                   Or in release mode, like
                   {"bundle": "~/bundles/inventory", "sources": 
                    ["/bundles/inventory?v=YaRZhEhGq-GkPEQDut6enckUI6FH663GEN4u2-0Lo1g1"],
                    "factory": "inventoryViewModel", "context": "inventorycontext", "forceNew": false}
*@
@Helper GetModel(BundleNameUrl As String, FactoryName As String, ContextName As String, Optional ForceNew As Boolean = False)
    @Code
        Dim result As New System.Text.StringBuilder()
        result.Append("{""bundle"": """ & BundleNameUrl & """, ""sources"": [")
        Dim httpCtx As New HttpContextWrapper(HttpContext.Current)
        ' When EnableOptimizations = True, there will be one script source URL per bundle
        ' When EnableOptimizations = False, each script in the bundle is delivered separately
        If BundleTable.EnableOptimizations Then
            result.Append("""" & System.Web.Mvc.UrlHelper.GenerateContentUrl( _
                BundleResolver.Current.GetBundleUrl(BundleNameUrl), httpCtx) & """")
        Else
            Dim first As Boolean = True
            For Each bundle In BundleResolver.Current.GetBundleContents(BundleNameUrl)
                If first Then first = False Else result.Append(",")
                result.Append("""" & System.Web.Mvc.UrlHelper.GenerateContentUrl(bundle, httpCtx) & """")
            Next
        End If
        result.Append("], ""factory"": """ & FactoryName & """, ""context"": """ & ContextName & """")
        result.Append(", ""forceNew"": " & If(ForceNew, "true", "false") & "}")
    End Code
@<text>@result.ToString()</text>
End Helper

然后我可以在这样的节点上应用该属性，让它指示它希望如何将淘汰绑定应用于自身及其后代，以及在这样做之前需要哪些脚本。请注意，我的意图是如何能够从多个节点引用相同的脚本包和模型，而无需重复下载或具有重复的模型实例，除非我特别使用 forceNew 请求模型的单独实例。在一个地方添加一个容器来容纳这个属性可能会更好，但我想证明这不是必需的。

Views/Inventory/Details.html

<a href="#" data-bind="click: loadPrevious" data-model="@Helpers.GetModel("~/bundles/inventory", "inventoryDetailViewModel", "inventorycontext")" title="Previous">Previous</a>
<a href="#" data-bind="click: loadNext" data-model="@Helpers.GetModel("~/bundles/inventory", "inventoryDetailViewModel", "inventorycontext")" title="Next">Next</a>
<fieldset data-bind="with: fsItem" data-model="@Helpers.GetModel("~/bundles/inventory", "inventoryDetailViewModel", "inventorycontext")">

最后，我创建了一个在现有捆绑包中引用的 javascript 文件，该捆绑包始终被拉入_Layout.vbhtml。它具有处理新的“数据模型”属性所需的客户端代码。这个想法是在这些特定节点上调用ko.applyBindings，并且只实例化一次视图模型，除非在多个节点上明确请求模型的不同实例。

脚本/app/webui.main.js

// Make sure we have our namespace carved out, and we
// know we're going to put a scriptCache in it.
window.webui = window.webui || { "scriptCache": {} };

// Copied from http://stackoverflow.com/a/691661/78162
// jQuery's getScript uses a mechanism that is not debuggable
// when operating within the domain, so we use this code to
// make sure the code is always a debuggable part of the DOM.
window.webui.getScript = function (url, callback) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.src = url;

    // Handle Script loading
    {
        var done = false;

        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function () {
            if (!done && (!this.readyState ||
                  this.readyState == "loaded" || this.readyState == "complete")) {
                done = true;
                if (callback)
                    callback();

                // Handle memory leak in IE
                script.onload = script.onreadystatechange = null;
            }
        };
    }
    head.appendChild(script);
    // We handle everything using the script element injection
    return undefined;
};

// Call knockout's applyBindings function based on values specified in the
// data-model attribute after the script is done downloading (which is the
// responsibility of the caller).
window.webui.applyBindings = function (cacheObj, forceNew, factory, context, node) {
    // Store instantiated view model objects for each factory in
    // window.webui.scriptCache[bundleName].models for reuse on other nodes.
    cacheObj.models = cacheObj.models || {};
    // If an instance of the model doesn't exist yet, create one by calling the
    // factory function, which should be implemented in a script in the
    // downloaded bundle somewhere. And the context object should have already
    // been instantiated when the script was downloaded.
    if (forceNew || !cacheObj.models[factory])
        cacheObj.models[factory] = window.webui[factory](ko, window.webui[context]);
    // Apply bindings only to the node where data-model attribute was applied
    ko.applyBindings(cacheObj.models[factory], node);
};

// Callback function when a script specified in the data-model attribute is
// done being downloaded on demand.
window.webui.onModelLoaded = function (cacheObj) {
    // Count how many scripts inteh bundle have finished downloading
    cacheObj.loadedCount += 1;
    // If we have downloaded all scripts in the bundle, call applyBindings
    // for all the nodes stored in the onComplete array.
    if (cacheObj.loadedCount == cacheObj.totalCount) {
        for (var callback in cacheObj.onComplete) {
            var onComplete = cacheObj.onComplete[callback];
            window.webui.applyBindings(cacheObj, onComplete.forceNew,
                onComplete.factory, onComplete.context, onComplete.node);
        }
    }
};

// Process the data-model attribute of one HTML node by downloading the related bundle
// scripts if they haven't yet been downloaded and then calling applyBindings based on
// the values embedded in the attribute.
window.webui.require = function (modelAttribute, node) {
    model = $.parseJSON(modelAttribute);
    // Keep a cache of all the bundles that have been downloaded so we don't download the same
    // bundle more than once even if multiple nodes refer to it.
    window.webui.scriptCache = window.webui.scriptCache || {};
    // The cache is keyed by bundle name. All scripts in a bundle are downloaded before
    // any bindings are applied.
    if (!window.webui.scriptCache[model.bundle]) {
        // Store the expectd count and the loaded count so we know when the last
        // script in the bundle is done that it's time to apply the bindings.
        var cacheObj = {
            totalCount: model.sources.length, loadedCount: 0, onComplete:
                [{ "factory": model.factory, "context": model.context, "node": node, "forceNew": model.forceNew }]
        };
        window.webui.scriptCache[model.bundle] = cacheObj;
        // For each script in the bundle, start the download, and pass in cacheObj
        // so the callback will know if it has downloaded the last script and what
        // to do when it has.
        for (var script in model.sources) {
            window.webui.getScript(model.sources[script], function () {
                window.webui.onModelLoaded(cacheObj)
            });
        }
    } else {
        // If the bundle referenced already has a space allocated in the cache, that means
        // its scripts are already downloaded or are in the process of being downloaded.
        var cacheObj = window.webui.scriptCache[model.bundle];
        if (cacheObj.totalCount == cacheObj.loadedCount) {
            // If the bundle is already completely downloadad, just apply the bindings directly
            window.webui.applyBindings(cacheObj, model.forceNew, model.factory, model.context, node);
        } else {
            // If the bundle is still being downloaded, add work to be done when bindings
            // are applied upon completion.
            window.webui.scriptCache[model.bundle].onComplete.push({
                "factory": model.factory, "context": model.context, "node": node, "forceNew": model.forceNew
            });
        }
    }
};

// When the document is done loading, locate every node with a data-model attribute
// and process the attribute value with the require function above on that node.
$(document).ready(function () {
    $('[data-model]').each(function () {
        var model = $(this).data("model");
        window.webui.require(model, this);
    });
});

有了这个解决方案，我可以依靠现有的 ASP.NET MVC4 捆绑框架（我不需要 r.js）来优化和组合 javascript 文件，还可以实现按需下载和定义脚本的不显眼机制并查看与淘汰赛绑定相关的模型。