MVC5和jQuery模板
[英]MVC5 and jQuery template
問題描述
我正在嘗試遵循此會話中顯示的示例。 我在計算機上安裝了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，但它會輸出整個腳本（請參見下文）
{{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"));
}
}
3 個解決方案
解決方案1
1 2015-08-03 14:26:55
在Knockout JS中，有幾種方法可以進行模板綁定，比其他方法更為冗長。 我建議您通讀模板綁定文檔 。 這是綁定到模板的一種方法。
例
<ul data-bind="template: {'friendsTemplate', foreach: friends}"></ul>
<script id="friendsTemplate" type="text/html">
<li data-bind="text: name"></li>
</script>
解決方案2
0 2015-08-03 03:22:02
您需要在視圖頁面的頂部引用Knockout.JS。
@{ ViewBag.Title = "Home Page"; }
<script scr="~/scripts/knockout-3.3.0.js" type="text/javascript">
<div data-bind="template: 'friendsTemplate'"></div>
<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>
解決方案3
0 2015-08-04 11:06:39
貝婁是對我有用的解決方案（如Colin Bacon所建議）
<ul data-bind="template: {name: 'friendsTemplate',foreach: friends }"></ul>
<script id="friendsTemplate" type="text/html">
<li data-bind="text: name"></li>
</script>
仍然我不知道我的初始代碼出了什么問題（ 此視頻中已演示）
MVC5 jQuery ajax
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.