ASP.NET MVC将模型传递给KnockoutJS外部文件

Question

我已经阅读了很多关于stackoverflow和谷歌搜索的资源，但似乎没有特别涉及到我的问题。

简而言之，我想将我的C#模型从视图传递到外部JS文件(Knockout)，以便我可以使用该模型数据在我的视图上显示。

更多信息：

我有一个非常标准的ASP.NET MVC 5项目，包括(例如)1个视图、1个控制器和一个C#视图模型，该模型在我的C#控制器中获取并操作数据。我的外部JavaScript文件包含Knockout代码，具体来说，我想将该C#模型放入observableArray中，在那个外部JS文件中，这样我就可以将我的Knockout代码保留在我的视图之外(除了可能几行)。

示例:

books.js

var app = (function (app) {
    app.FilterBooks = function () {
        var self = this,
        books = ko.observableArray(myC#Model);

        var data = [];
        self.BooksList = ko.computed(function(){
            ko.utils.arrayForEach(books(), function (item) {
                data.push(item);
            });
        });
        return data;
    };
return app;
}(app || {}));

myC#Model 是我想从视图（或控制器）检索的 C# 模型。

Index.html

@model viewModel

<div data-bind="foreach: BooksList">
    some knockout code in the view
    <p data-bind="text: bookName"></p>
</div>

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            var e = new app.FilterBooks;
            ko.applyBindings(e);
        });
    </script>
}

HomeController.cs

public ActionResult Index()
{
    //gets the list of all the books
    var viewModel = this.bookManager.GetAllBooks();
    return View(viewModel);
}

想法:

我想到的一个解决方案是创建一个全局变量，然后我就可以在任何引用该变量之后的JS文件中访问它，但是这个解决方案似乎不太理想。在我的视图上，一个示例是：window.booksVM = @Html.Raw(Json.Encode(Model));

我希望有一种更好、更可扩展的解决方案，它涉及在视图上获取模型，并能够在我的外部JS文件中访问该模型。

- james

Answer 1

将您的模型序列化并传递给视图模型。

使用ko.mapping在您的视图模型内动态地映射它从您的模型中。

只要您的集合包含一个名为books的数组，它就会自动变成可观察的数组。

视图模型

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

    };
return app;
}(app || {}));

Index js

<script type="text/javascript">
    $(document).ready(function () {
    var data = @Html.Raw(Json.Encode(Model));
        var e = new app.FilterBooks(data);
        ko.applyBindings(e);
    });
</script>

更新

同时，正如@james14所提到的，确保您包括映射插件。

http://knockoutjs.com/documentation/plugins-mapping.html

PM> Install-Package Knockout.Mapping

https://www.nuget.org/packages/Knockout.Mapping

- hutchonoid

---

完美地工作了，谢谢！还有一点很重要需要提到（至少我不知道），但我需要包含 Knockout 的映射插件，可以在这里（或 NuGet）获取：http://knockoutjs.com/documentation/plugins-mapping.html - james

@jamez14 谢谢，我会把这个也加到答案里。 - hutchonoid