Question

问题

我正在努力使这个javascript（不是我自己的）适应剃刀更具活力。但是，我越来越清楚Razor是为嵌入HTML而不是javascript而设计的。

我希望能够使用razor将变量放入javascript中，这样我就可以绘制自定义网格了。一个可能是5 x 3，另一个可能是3 x 5.

免责声明：学习javascript，我正在努力改进

代码

以下是讨论我的问题的简短代码片段。它显然不完整，但可以了解出了什么问题：

我已放置完整的源代码here。

     @model SampleLibrary.Models.Shelf

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Details</title>
    <link rel="stylesheet" href="~/css/grid.css" />
    <script type="text/javascript">
        $(function () {

        //This is dummy code for now. I need to figure out how to generate this based on label type in the future
        var columns = ['Column #1', 'Column #2', 'Column #3', 'Column #4'];
        var rows = ['Row #1', 'Row #2', 'Row #3'];




        // This is broken very badly - should be getting the following  values
        //model.columns = 4 and model.rows = 3
        var number_of_products = model.columns * model.rows;

错误消息

我不再像之前显示的那样收到上一条错误消息。相反，我会得到页面...但没有网格。我在mozilla上使用了firebug，它告诉我模型没有定义。嘿嘿？

尝试

我的第一次尝试真的很天真

起初我以为可能是因为在模型信息可用之前调用了javascript，但尝试了这个$(document).ready(function ()
我想也许我应该将模型调用为Model.columns
我尝试添加<text></text>语法，它甚至不会使用

摘要

最后一部分让我觉得我的做法可能是错的。所以我想的是如下：

重写函数以获取参数function(column, row, whateverElse)
- 参数将是model.column，model.row和model.whateverElse
然后我可以将javascript移动到它自己的位置。将其命名为grid.js。
但这里是我大脑爆炸的地方。在我看来，如何从剃须刀中提供我需要的值？

现在我知道如何通过将函数放入类似grid.js之类的东西来将函数移动到它自己的文件中 <script src="~/lib/grid.js"></script>

然而，当我在一个视图中调用它时，我可以如何为它提供特殊值，如function(@model.column, @model.row, @model.whateverElse)

这是正确的轨道吗？或者我是否会在这个想法上走向外太空？任何提供的援助将深表感谢。

Answer 1

最简单的方法是停止在javascript中创建表并让razor为您完成，并修改javascript以处理与razor呈现的HTML交互。如果您只关心它调整网格大小，那么您可以通过模型或视图包传递列和行（如果您愿意）。

var columns = ['Column #1', 'Column #2', 'Column #3', 'Column #4'];

变为：

var columns = [@{
foreach(var colname in Model.Columns)
{
<text>'@colname'</text>
}
}];

另一种方法是使用数据属性，如下所示： <div id="products-wrapper" data-columns="@Model.columns" data-rows="@Model.rows">这样可以很容易地将所有javascript完全移出页面。你只需在你的一个javascript文件中包含这样的东西（假设你也有jQuery）：

$(document).ready(function(){
var cols=$('#products-wrapper').data('columns');
var rows=$('#products-wrapper').data('rows');
yourfunction(cols,rows);
});

您还可以将数据属性与ajax结合使用，以使您的javascript库调用返回用于填充网格的json的Web服务。 <div id='products-wrapper' data-url='@Action.Url("getdata")'>然后编写您的javascript来获取网址，调用它，然后使用结果填充网格。这绝对是最可扩展的方法，因为您可以使用输出缓存来缓存页面（假设没有其他任何更改）并让客户端缓存它。

Answer 2

您可以通过删除

来解决此问题

@model Application.Models.Shelf

但问题最好通过识别传递给视图的内容并在那里修复它来解决。

它说你传递了一个字符串，但是它期待一个Application.Models.Shelf对象

如何使用剃须刀使这个JavaScript更具动态性？

2 个答案: