在ASP.NET MVC站点中重用Javascript片段

Question

我在我的网站上的各种视图中使用了一些jQuery插件.在某些情况下,使用document.ready在页面加载时在外部javascript内初始化插件.在其他情况下,初始化在另一个插件的回调fn内完成,或者可能在ajax调用重新加载局部视图之后完成.

我发现我在多个地方复制粘贴相同的插件初始化代码段,具体取决于它需要初始化的方式/位置.

用一个例子说明这一点:

情况1:FullCalendar使用qTip,而qTip又使用扩展器插件

$(function () {
    $('#calendar').fullCalendar({  // calendar
   .. snip ..
      eventRender: function (calEvent, element) { // render qtip on eventRender
            element.qtip({
            ...snip...
                events: {
                    ....snip....
                    render: function () {// initialize expander on callback
                        // SNIPPET start
                        $('div.expandable').expander({
                            expandPrefix: '',
                            expandText: '[...]',
                            userCollapseText: '[less]',
                            preserveWords: true,
                            widow: 4
                        });
                        // SNIPPET end
                    }
                }

案例2:通过ajax加载的部分视图

$(document).ready(function () {
        // SAME SNIPPET start
        $('div.expandable').expander({
            expandPrefix: '',
            expandText: '[...]',
            userCollapseText: '[less]',
            preserveWords: true,
            widow: 4
        });
        // SAME SNIPPET end
 });

当然,我不是这种方法的忠实粉丝,并且想知道是否有更好的方法来解决这个问题.我想我正在寻找的是一个"局部视图"的概念,但对于.NET MVC3 Razor网站中的javascript.想法是将$('div.expandable')片段放在一个公共位置,并包含在需要的地方.

任何可能同时适用于外部js文件的想法/建议？

谢谢!

Answer 1

我通常做的是为我的javascript片段创建帮助对象.请参阅此内容以获取"教程".

你要做的是在app_code文件夹中创建一个名为JavascriptHelper.cshtml的文件,并添加到它:

基本上:

@helper qTipRender()
{
    // SNIPPET start
    $('div.expandable').expander({
        expandPrefix: '',
        expandText: '[...]',
        userCollapseText: '[less]',
        preserveWords: true,
        widow: 4
    });
    // SNIPPET end
}

然后在你的视图中:

render: function () {
    @JavascriptHelper.qTipRender();
}

带参数:

你还可以做的是添加参数:

@helper qTipRender(bool preserveWords)
{
    // SNIPPET start
    $('div.expandable').expander({
        expandPrefix: '',
        expandText: '[...]',
        userCollapseText: '[less]',
        preserveWords: @preserveWords,
        widow: 4
    });
    // SNIPPET end
}

然后在你的视图中:

render: function () {
    @JavascriptHelper.qTipRender(true);
}

使得很容易维护大量的javascript snippits,即使它们的参数有所不同.