Asp.Net Mvc使用Knockout渲染局部视图

Question

我在我的项目中使用Web Api和Knockout.js。我想尝试这样：如果我点击“主页”，我想刷新主要div。所以我写了这段代码。

我在layout.cshtml中的脚本

<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>

TaleList.cshtml（PartialView）

<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>

当我点击Home主div时，刷新但无数据在此处。我想我必须使用Knockout，但我不知道怎么办。

我希望我能解释一下。谢谢所有的回复。

更新

如果我用firebug检查，我看到这个错误“TypeError：Object＃have method'fromjs'”

Update2

我在加载项目时添加了第一个淘汰代码。

Answer 1

这是你需要做的：

创建一个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);

这是一个模仿数据的工作小提琴

http://jsfiddle.net/dxJpc/1/

<强>更新

您混合了getJson和ajax的组合，您只需要一个。{1}}和 $.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") }) 。

这可以替换:(使用Ajax）

 var data = $.getJSON("/api/tales/", Tale);
 var viewModel = ko.mapping.fromJS(data, mapping);
 ko.applyBindings(viewModel);  

使用getJSON：

   $('#home').click(function () {
        ko.applyBindings(new TalesViewModel());
    })

更新3

如果您在更改初始加载时加载了初始加载，只需将其置于点击事件中即可：

  $(document).ready(function () {
    var viewModel = new TalesViewModel();
    ko.applyBindings(viewModel);

更新4

在文档中声明视图模型。

  $(document).ready(function () {
     viewModel = new TalesViewModel();

然后将您的点击更改为：

{{1}}