为什么这个Javascript只执行一次？

Question

以下是相关代码：

这段代码是一个View（位于父页面占位符中的局部视图），我有这个View的控制器执行9次。当我不使用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>

     <script>

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

             });

         });

     </script>
 }

这里是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

        );






    });
}

这是应该渲染9次的标记：

   <div class="row">
        <div class="col lg-6 xl-5">
            <div class="section-content">
                <div id="detail-container">
                </div>
            </div> 

            <script type="text/html" id="location-detail-template"> 
                <div class="card card-locations-alt">
                    <div class="card-content">
                        <figure class="map">
                            <a target="_blank" href="https://www.google.com/maps/dir/Current+Location/@Model.Location.Latitude, @Model.Location.Longitude">
                                <img src="https://maps.googleapis.com/maps/api/staticmap?center=@Model.Location.Latitude,@Model.Location.Longitude&zoom=13&size=65x65&maptype=roadmap&markers=color:0x776EA7%7Clabel:%7C @Model.Location.Latitude,@Model.Location.Longitude">
                            </a>
                        </figure>
                        <div class="location-content" itemscope="" itemtype="http://schema.org/LocalBusiness">
                            <div class="location-name">
                                <h2 class="location-title" itemprop="name" data-bind="text: 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"></a>
                            </div>
                        </div>
                        <div class="location-actions flex-container align-center no-print">
                            <a class="locations-icon flex-item tel" href="tel:8475358000">
                                <div class="call-icon uppercase">
                                    <i class="material-icons">phone</i><br>
                                    call
                                </div>
                            </a>
                            <a data-bind="attr: {'href' : 'https://www.google.com/maps/dir/Current+Location/' + Latitude + ',' + Longitude, 'data-track' : 'Find a Location', 'data-track-action' : 'directions', 'data-track-label' : ItemName }" target="_blank" class="locations-icon flex-item uppercase">
                                <i class="material-icons">directions</i><br>
                                directions
                            </a>
                            <a href="" class="location-detail locations-icon flex-item uppercase">
                                <i class="material-icons">info</i><br>
                                details
                            </a>
                        </div>
                    </div>

                </div>

            </script> 

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

            @(new HtmlString(Model.Body))

        </div>

    </div>