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

Question

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

My script in 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>

I want to refresh this place

<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的组合，你只需要一个。

这可以替换:(使用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

如果您在更改初始加载时加载了初始加载，则可以将其置于单击事件中：

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

更新4

在文档中声明视图模型准备就绪。

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

然后将您的点击更改为：

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