在 MVC3 视图中使用嵌入式 JavaScript 还是单独的 .js 文件更好
Is it better to use embedded javascript or a separate .js file in an MVC3 view?
有人告诉我,最好将Javascript代码放在一个单独的文件中,以保持关注点的分离,虽然这个想法引起了我的共鸣,但我发现它并不实用。
这可能只是我的经验不足,因此提出了这个问题。
这里有一个清晰的示例,我发现将代码放在视图中比将其放在单独的 javascript 文件中更好。
在我的视图中,我需要调用 JQueryUI 对话框,并使用模型的名称动态设置标题。
$("#thumbs img").click(function () {
var url = $(this).attr("src");
$(".image-popup").attr("src", url);
return $("#image-popup").dialog({
modal: true,
closeOnEscape: true,
minHeight: 384,
minWidth: 596,
resizable: false,
show: {
effect: 'slide',
duration: 500,
direction: 'up'
},
hide: {
effect: 'slide',
duration: 250,
direction: 'up'
},
title: '@Model.Product.Name'
});
});
通知:
title: '@Model.Product.Name'
如您所见,如果我在我的视图中使用 Javascript,我可以访问强类型模型。如果我使用单独的 Javascript 文件,情况并非如此。
我做错了吗,有什么我没有看到的吗?
如果我使用一个单独的文件,当我无法从 Javascript 文件中访问模型属性时,它会是什么样子?
单独的 js 文件:
<div id="thumbs">
<img data-dialog-title="@Model.Product.Name" src="[whatever url]" />
</div?
$("#thumbs img").click(function () {
var title = $(this).data('dialog-title');
var url = $(this).attr("src");
$(".image-popup").attr("src", url);
return $("#image-popup").dialog({
modal: true,
closeOnEscape: true,
minHeight: 384,
minWidth: 596,
resizable: false,
show: {
effect: 'slide',
duration: 500,
direction: 'up'
},
hide: {
effect: 'slide',
duration: 250,
direction: 'up'
},
title: title
});
});
使用 HTML5 data-* 属性通过 dom 不显眼地访问模型属性。上面的javascript可以很好地作为外部文件工作。
如果您不能使用上述HTML5数据属性,那么也许 http://nuget.org/packages/RazorJS 可以解决问题,似乎可以解决您的问题。
相关文章:
- 性能与模块化:将JS集成到PHP或单独的custom.JS中
- jQueryAjax调用在单独的.js文件中不起作用
- Bootstrap CSS和JS我必须将它们包含在单独的文件中,或者可以编译它们
- 在 Node.JS 中,如何从单独的.js文件中返回整个对象
- google.setOnLoadCallback()在单独的JS文件中不起作用
- 单独的文件(HTML5、CSS和JS)
- 在单独的上下文中运行 js 代码并访问其全局变量
- 如何将.js从视图移动到单独的资产 - Ruby On Rails
- 单独的类别项角度JS
- 如何在单独的文件中调用函数 js.
- 如何在单独的文件中使用自定义Vtype,以便在EXT.JS中全局使用它们
- Angular JS控制器和Factory在单独的文件中
- Angular JS-我可以为选项卡使用单独的控制器来加载窗格吗.这是个好做法吗
- 在单独的js文件中访问web配置
- 通过单独的js文件设置HTML值
- Vue.js"track-by-$index”;,如何单独呈现列表项
- 将表单元格数据转换为单独.js文件中的内部链接
- 如何访问单独js文件中的服务器数据
- 将从 HTML 表单获取的值传递到位于单独.js脚本中的 TaffyDB 数据库中
- 自动验证每个单词单独(js)