Asp.Net Mvc渲染局部視圖

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>

當我單擊“主頁”時，主div刷新，但此處沒有數據 。 我想我必須使用Knockout，但我不知道該怎么做。

我希望我能解釋。 感謝所有回復。

更新

如果我檢查螢火蟲，則會看到此錯誤“ TypeError：對象＃沒有方法'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

如果您將初始負載更改為初始負載，則可以將其放入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();