[英]Asp.Net Mvc Render Partial View With Knockout
我在项目中使用Web Api和Knockout.js。 我想这样尝试:如果单击“主页”,则只刷新主div。 所以我写这段代码。
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new TalesViewModel());//First load the code is runnig and load the main div
function TalesViewModel() {
var self = this;
self.tales = ko.observableArray();
$.getJSON("/api/tales/", self.tales);
}
$('#home').click(function () {
var Tale = function (TaleName, Content, VoicePath, Tales) {
self = this;
self.TaleName = TaleName;
self.Content = Content;
self.VoicePath = VoicePath;
}
var mapping = {
'tales': {
create: function (options) {
return new Tale(options.data.TaleName, options.data.Content,
options.data.VoicePath);
}
}
}
var data = $.getJSON("/api/tales/", Tale);
var viewModel = ko.mapping.fromjs(data, mapping);
ko.applyBindings(viewModel);
})
})
</script>
<div id="main">
@RenderBody()
</div>
<div>
<ul data-bind="foreach: tales">
<li>
<div>
<div>Masal Adı</div>
<span data-bind="text: $data.TaleName"></span>
</div>
<div>
<div>İçerik</div>
<span data-bind="text: $data.Content"></span>
</div>
<div>
<div>Ses Dosyası</div>
<span data-bind="text: $data.VoicePath"></span>
</div>
</li>
</ul>
当我单击“主页”时,主div刷新,但此处没有数据 。 我想我必须使用Knockout,但我不知道该怎么做。
我希望我能解释。 感谢所有回复。
如果我检查萤火虫,则会看到此错误“ TypeError:对象#没有方法'fromjs'”
我在加载项目时添加了我的第一个基因剔除代码。
这是您需要做的:
创建一个js对象
var Tale = function (TaleName, Content, VoicePath, Tales) {
self = this;
self.TaleName = TaleName;
self.Content = Content;
self.VoicePath = VoicePath;
}
创建映射以转换为您的js对象
var mapping = {
'tales': {
create: function(options) {
return new Tale(options.data.TaleName, options.data.Content,
options.data.VoicePath);
}
}
}
检查您的数据是否与以下内容匹配,并检查名称是否与以下内容匹配:
var data = {"tales" : [{"TaleName": "T1", "Content":"c1", "VoicePath":"v1"}, {"TaleName": "T2", "Content":"c2", "VoicePath":"v2"}]}
var viewModel = ko.mapping.fromJS(data, mapping);
应用绑定
ko.applyBindings(viewModel);
这是模拟数据的有效提琴
更新
您正在混合getJson
和ajax
的组合,只需要一个即可。
可以替换为:(使用Ajax)
$.ajax({
type: 'GET',
url: '/Pages/TaleList/',
contentType: 'application/html; charset=utf-8',
dataType: 'html'
})
.success(function (data) {
alert("okey!")
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);
})
.error(function (req, status, error) {
alert("Error!Occured")
})
使用getJSON:
var data = $.getJSON("/api/tales/", Tale);
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);
更新3
如果您将初始负载更改为初始负载,则可以将其放入on click事件中:
$('#home').click(function () {
ko.applyBindings(new TalesViewModel());
})
更新4
在文档中声明视图模型。
$(document).ready(function () {
var viewModel = new TalesViewModel();
ko.applyBindings(viewModel);
然后将您的点击更改为:
$(document).ready(function () {
viewModel = new TalesViewModel();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.