淘汰赛不渲染 - 简单示例答案

【问题标题】：Knockout Not Rendering - Simple Example淘汰赛不渲染 - 简单示例
【发布时间】：2019-10-31 05:15:45
【问题描述】：

我正在学习 MVC - 在 VS2019 中使用 .NET Core 的 MVVM。我正在学习复数课程并使用我现有的表格来尝试掌握它....

当我从视图模型中引入剔除和剔除映射时，它只显示标签

但不是记录的详细信息。由于我缺乏经验，我相信这很简单。我将在下面发布代码sn-ps。

Details.cshtml

@model DRMS.EDX.Web.ViewModels.DataFileViewModel
@using Newtonsoft.Json

@{
ViewBag.Title = "DataFile Details";
}
@section scripts{
<script src="~/Scripts/knockout-3.5.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/datafileviewmodel.js"></script>
<script type="text/javascript">
    var dataFileViewModel = new DataFileViewModel(@Html.Raw(Model));
    ko.applyBindings(dataFileViewModel);
</script>
}

<h2>@ViewBag.Title</h2>

<p data-bind="text: MessageToClient"></p>

<div>
  <div>
    <label>DataFileLayoutID :</label>
    <span data-bind="text: DataFileLayoutID"></span>
</div>
<div>
    <label>CreatedByID :</label>
    <span data-bind="text: CreatedByID"></span>
</div>
<div>
    <label>CreatedDate :</label>
    <span data-bind="text: CreatedDate"></span>
</div>
<div>
    <label>ModifiedByID :</label>
    <span data-bind="text: ModifiedByID"></span>
</div>
<div>
    <label>ModifiedDate :</label>
    <span data-bind="text: ModifiedDate"></span>
</div>
<div>
    <label>HasScheduleA :</label>




datafileviewmodel.js

DataFileViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
};




Controller

   public async Task<IActionResult> Details(Guid? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var dataFile = await _context.DataFiles
            .FirstOrDefaultAsync(m => m.Id == id);
        if (dataFile == null)
        {
            return NotFound();
        }

        DataFileViewModel dataFileViewModel = new DataFileViewModel();

        dataFileViewModel.Id = dataFile.Id;
        dataFileViewModel.DataFileLayoutID = dataFile.DataFileLayoutID;
        dataFileViewModel.CompanyID = dataFile.CompanyID;
        dataFileViewModel.FileTypeId = dataFile.FileTypeId;
        dataFileViewModel. FileNameID = dataFile.FileNameID;
        dataFileViewModel.MessageToClient =  "I originated from the 
            viewmodel, rather than the model.";

        return View(dataFileViewModel);
    }

【问题讨论】：

浏览器控制台报错了吗？
加载资源失败：服务器响应状态为 404 () datafileviewmodel.js 加载资源失败：服务器响应状态为 404 () knockout-3.5.0.js 失败加载资源：服务器响应状态为 404 () knockout.mapping-latest.js 加载资源失败：服务器响应状态为 404 () datafileviewmodel.js 加载资源失败：服务器响应状态为404 () 00000035-0075-0000-0000-000000000000:157 未捕获的 ReferenceError: DataFileViewModel 未定义在 00000035-0075-0000-0000-000000000000:157
在 Core 2 中捆绑有最佳实践吗？如果是这样，那会是什么？我在哪里可以看到它完成的？
所以我只是遇到此控制台错误...无法加载资源：服务器响应状态为 404 () 00000035-0075-0000-0000-000000000000:157 未捕获的 ReferenceError: DataFileViewModel未定义在 00000035-0075-0000-0000-000000000000:157
404错误表示没有找到请求的页面。打开浏览器检查器，打开网络选项卡并重新加载页面。您应该能够看到未找到的资源并了解调用了哪个 url...无论如何我认为这是服务器端问题。

标签： mvvm knockout.js asp.net-core-mvc

【解决方案1】：

从控制器创建模型，不会生成以模型命名的JS文件。这就是您收到 404 错误的原因。

如果你想从控制器中传入模型，那么你不需要单独的 JS 文件来达到同样的目的。

这是我制作并测试的一个快速示例的代码 sn-ps。

这是控制器动作：

    public IActionResult KnockoutJS()
    {
        return View(new DataFileViewModel() {
            Id="1",
            DataFileLayoutId="file layout",
            CompanyId = "{E20B0561-3458-412C-B5FA-DB1354D40D21}",
            FileTypeId ="TEXTFILE",
            FileNameId="TEXT",
            MessageToClient = "I originated from the view model rather than the model."
        });
    }

这是视图和knockoutJS 的初始化。为了准确回答你的问题，我添加了 ko.mapping 代码，但你不应该使用这个插件，因为它的开发已经被放弃了，除非你打算维护它:) 这个例子也使用了 jQuery。如果你不需要它，你不必这样做。

@model DataFileViewModel
@section scripts{
<script type="text/javascript">
        $.ready.then(() => {
            var mapping = ko.mapping.fromJS(@Html.Raw(Json.Serialize(Model)));
            var dataFileViewModel = {
                Id: '@Model.Id',
                DataFileLayoutId:'@Model.DataFileLayoutId',
                CompanyId: '@Model.CompanyId',
                FileTypeId: '@Model.FileTypeId',
                FileNameId: '@Model.FileNameId',
                MessageToClient:'@Model.MessageToClient'
                    };
             ko.applyBindings(dataFileViewModel, document.getElementById("bindingRoot"));
        });

</script>
}

您还需要确保在尝试 applyBindings 之前已加载了 knockoutJS。

最后是带有绑定的 HTML。

<div id="bindingRoot">
<p data-bind="text: MessageToClient"></p>

<div>
    <div>
        <label>Id :</label>
        <span data-bind="text: Id"></span>
    </div>
    <div>
        <label>DataFileLayoutId :</label>
        <span data-bind="text: DataFileLayoutId"></span>
    </div>
    <div>
        <label>CompanyId :</label>
        <span data-bind="text: CompanyId"></span>
    </div>
    <div>
        <label>FileTypeId :</label>
        <span data-bind="text: FileTypeId"></span>
    </div>
    <div>
        <label>FileNameId :</label>
        <span data-bind="text: FileNameId"></span>
    </div>
</div>

结果在浏览器中

【讨论】：