Question

我正在尝试按照this会话中显示的示例进行操作。我在我的机器上安装了VS 2013。下面是处理jQuery模板的代码。但是我无法看到预期的输出。

<div data-bind="template: 'friendsTemplate'"></div>

<script id="friendsTemplate" type="text/html">
    <ul>
        {{each(index,friend) friends}}
        <li>
            ${friend.name}
        </li>
        {{/each}}
    </ul>
</script>
@section scripts{

    <script type="text/javascript">
        $(function () {
            function friend(name) {
                return {
                    name: ko.observable(name)
                };
            }
            var viewModel = {
                firstName: ko.observable('FirstName'),
                lastName: ko.observable('LastName'),
                friends: ko.observableArray([new friend('F1'),new friend('F2'),new friend('F3')])
            };
            viewModel.fullName = ko.dependentObservable(function () {
                return this.firstName() + ' ' + this.lastName()
            },viewModel);

            ko.applyBindings(viewModel);

        });
    </script>
}

更新：请参阅下面的Layout.cshtml文件

<!DOCTYPE html>
<html>
<head>
    deleted...
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    Deleted...

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/koBootStrap")
    @RenderSection("scripts", required: false)
</body>
</html>

我期待看到朋友列表，即F1，F2和F3，而是输出的entier脚本（见下文）

{{each(index,friend) friends}}
${friend.name}
{{/each}}

我错过了任何jQuery库我已经包含了以下库

jQuery的1.10.2.js
敲除3.3.0.js

我是否必须包含任何其他jQueryTemplate库？

更新2：

<div data-bind="template: 'friendsTemplate'"></div>


@section scripts{


    <script type="text/javascript">
        $(function () {
            function friend(name) {
                return {
                    name: ko.observable(name)
                };
            }
            var viewModel = {
                firstName: ko.observable('Hemant'),
                lastName: ko.observable('Shelar'),
                friends: ko.observableArray([new friend('Atul'), new friend('Atul'), new friend('Atul')])
            };
            viewModel.fullName = ko.dependentObservable(function () {
                return this.firstName() + ' ' + this.lastName()
            }, viewModel);

            ko.applyBindings(viewModel);

            alert('ok');

        });
    </script>

    <script id="friendsTemplate" type="text/html">
        <ul>
            {{each(index,friend) friends}}
            <li>
                ${friend.name}
            </li>
            {{/each}}
        </ul>
    </script>
}

我仍然看不到朋友名单。它输出整个'text / html'块原样。

更新3：发布捆绑包配置

public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            var scriptBundleKoBootStrap = new ScriptBundle("~/bundles/koBootStrap");
            scriptBundleKoBootStrap.Include(new string[] { "~/Scripts/bootstrap.js","~/Scripts/respond.js","~/Scripts/knockout-{version}.js"});
            bundles.Add(scriptBundleKoBootStrap);

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }

Answer 1

在Knockout JS中有一些模板绑定的方法，有些方法比其他方法更冗长。我建议您阅读template binding documentation。这是绑定到模板的一种方法。

示例

<ul data-bind="template: {'friendsTemplate', foreach: friends}"></ul> <script id="friendsTemplate" type="text/html"> <li data-bind="text: name"></li> </script>

Answer 2

您需要在视图页面顶部引用Knockout.JS。

lines

Answer 3

贝娄是一种对我有用的解决方案（由科林培根建议）

<ul data-bind="template: {name: 'friendsTemplate',foreach: friends }"></ul>

<script id="friendsTemplate" type="text/html">
    <li data-bind="text: name"></li>
</script>

我仍然不知道我的初始代码有什么问题（已在this视频中演示）

MVC5和jQuery模板

3 个答案: