为什么我的模板不是渲染Knockout.js

Question

所以，只是一点背景......我需要使用来自客户端的数据处理控制器中的数据。因此，建议使用knockout.js。

此特定页面有一个主页面，然后是多个占位符，它们都具有相同的格式。主要问题是只有其中一个出现，而这恰好是最后一个。当我检查元素时，我看到数据存在，但没有呈现。

这是代码： 首先......父项的标记。

@using (Html.BeginFooterScripts())
{
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
    <script type="text/javascript" src="/Content/Northwestern/js/_libs/knockout.mapping/knockout.mapping.2.4.1.js"></script>
    <script type="text/javascript" src="~/Content/Northwestern/js/views/TabPanel/location-card.js"></script>

    <script type="text/javascript">
        var once = true;
        $(function () {
            if (once) {

                initialize();
                once = false;
            }
        });

    </script>
}

<div class="resp-tabs-container tabs-narrow">
    @if (Model.TabSelector.Equals("location-row"))
    {
        <div>
            @*this div needs to be empty. The easyResponsiveTabs plugin adds classes to it and matches it with the <li> in the resp-tab-list above*@

            @*Location List *@

            <div class="@Model.TabSelector">
                <div class="indent">
                    <h3>@Model.Title</h3>
                </div>
                @Html.Sitecore().DynamicPlaceholder("Location-Card")
            </div>
        </div>
    }

DynamicPlaceholder是问题所在......目前有9个相同的位置卡

这是LocationCard.cshtml的标记

@using (Html.BeginFooterScripts())
  {
      <script type="text/javascript" src="~/Content/Northwestern/js/views/TabPanel/location-card.js"></script>


          <script>

              $(function() {
                  geoLocate(function(location) {
                      var latitude = location.coords.latitude;
                      var longitude = location.coords.longitude;
                      displayLocation('@Model.LocationId', latitude, longitude);
                  });

              });


          </script>
      }  





                <div id="detail-container">
                </div>

            <script type="text/html" id="location-detail-template"> 

                                <h2 class="location-title" itemprop="name" data-bind="text: ItemName">@Model.Location.ItemName</h2>
                            </div>
                            <div class="distance">
                                <i class="material-icons">place</i> <span data-bind="text: Distance.toFixed(1)"> Mi</span>
                            </div>
                            <div class="location-phone">
                                <a data-bind="attr: { 'href': clickToCallify(Phone), 'data-track-event': 'Find a Location - Detail', 'data-track-action': 'call icon' }" class="tel" itemprop="telephone">@Model.Location.Phone</a>
                            </div>
                        </div>

                </div>

            </script> 

        </div>
        <div class="col lg-6 xl-7">

            @(new HtmlString(Model.Body))

        </div>

    </div>
}

这是Location-card.js

var applied = false;
var geoLocateError = function onError(error) {
    alert(error.message);
};

function ViewModel() {
    var self = this;
    self.currentLocation = {
        latitude: 0,
        longitude: 0
    };

}

var viewModel = new ViewModel();


$(function () {

});

function initialize() {

    ko.applyBindings(viewModel); 
    geoLocate(function(location) {
        initLocation(location);       
    }, geoLocateError);


}

/**********************************************
* Location Functions
**********************************************/
function initLocation(location) {
    viewModel.currentLocation = {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude
    };

}


function displayLocation(id, lat, lng) {
    var apiUrl = '/api/northwestern/locations/getlocationbyid/' + id;

    var data = {
        'latitude': lat,
        'longitude': lng
    };

    self.LocationId = id;

    $.getJSON(apiUrl, data, function (response) {
        var fragment = document.createDocumentFragment(),
            container = document.createElement('div'),
            viewModel = response;
        fragment.appendChild(container);

        // merge together all the display types into a commma-separated list
        response.TypeListDisplay = $.map(response.Types, function (obj, t) {
            return obj.ItemName;
        }).join(', ');

        ko.renderTemplate(
            "location-detail-template",
            viewModel, {
                afterRender: function () {
                    $('#detail-container').html(container.innerHTML);
                }
            },
            container

        );






    });
}

所以，我不确定该怎么做。我这几天一直在研究这个问题

任何帮助将不胜感激。