[英]Asp.Net Mvc Render Partial View With Knockout
I use Web Api and Knockout.js in my project. 我在项目中使用Web Api和Knockout.js。 I want to try like this: if I click the "Home" I want to refresh just main div.
我想这样尝试:如果单击“主页”,则只刷新主div。 So I write this code.
所以我写这段代码。
<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>
When I clicked Home main div is refresh but no data in here. 当我单击“主页”时,主div刷新,但此处没有数据 。 I think I have to use Knockout something but I don't know how can I do it.
我想我必须使用Knockout,但我不知道该怎么做。
I hope I can explain. 我希望我能解释。 Thanks all replies.
感谢所有回复。
If I check with firebug I see this error "TypeError: Object # has no method 'fromjs'" 如果我检查萤火虫,则会看到此错误“ TypeError:对象#没有方法'fromjs'”
I added my first knockout code when I load the project. 我在加载项目时添加了我的第一个基因剔除代码。
This is what you need to do: 这是您需要做的:
Create a js object 创建一个js对象
var Tale = function (TaleName, Content, VoicePath, Tales) {
self = this;
self.TaleName = TaleName;
self.Content = Content;
self.VoicePath = VoicePath;
}
Create a mapping to convert to your js objects 创建映射以转换为您的js对象
var mapping = {
'tales': {
create: function(options) {
return new Tale(options.data.TaleName, options.data.Content,
options.data.VoicePath);
}
}
}
Check that your data matches something like below, checking the names match as below: 检查您的数据是否与以下内容匹配,并检查名称是否与以下内容匹配:
var data = {"tales" : [{"TaleName": "T1", "Content":"c1", "VoicePath":"v1"}, {"TaleName": "T2", "Content":"c2", "VoicePath":"v2"}]}
var viewModel = ko.mapping.fromJS(data, mapping);
Apply the bindings 应用绑定
ko.applyBindings(viewModel);
Here is a working fiddle with mimicked data 这是模拟数据的有效提琴
http://jsfiddle.net/dxJpc/1/ http://jsfiddle.net/dxJpc/1/
Update 更新
You are mixing a combination of getJson
and ajax
, you only need one. 您正在混合
getJson
和ajax
的组合,只需要一个即可。
This can be replaced: (With 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")
})
With getJSON: 使用getJSON:
var data = $.getJSON("/api/tales/", Tale);
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);
Update 3 更新3
If you are loading your initial load as you have changed it to, you can simply put this in your on click event: 如果您将初始负载更改为初始负载,则可以将其放入on click事件中:
$('#home').click(function () {
ko.applyBindings(new TalesViewModel());
})
Update 4 更新4
Declare the view model in the document ready. 在文档中声明视图模型。
$(document).ready(function () {
var viewModel = new TalesViewModel();
ko.applyBindings(viewModel);
Then change your click to this: 然后将您的点击更改为:
$(document).ready(function () {
viewModel = new TalesViewModel();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.