KnockoutJS：模板未在可观察数组更改时更新（仅在添加时，在删除时有效）

Question

所以，我有带有站点的可观察数组，它通过模板显示。如果我将站点添加到此阵列，则模板不会更新，但如果我将从阵列中删除站点 - 瞧！模板已更新，所有以前添加的网站也都显示出来了。

如果我将使用漂亮的 hack（在代码中注释）将整个数组替换为新数组，那么一切正常。

顺便说一句，我通过 AJAX 加载模板并在之后使用“ko.applyBindings(viewModel)”。我认为这可以正常工作，因为初始站点显示正确。

$(function(){

//site entry in user's sites list
var siteObject = function(url, lastChecked, status){
    this.url = url;
    this.lastChecked = (lastChecked == 'undefined') ? '' : lastChecked;
    this.status = (status == 'undefined') ? 'not_checked_yet' : status;
    this.toDelete = false;
    this.remove = function() {viewModel.sites.remove(this)};
};

viewModel = {
    //=========== sites list managment ==========================
    sites: ko.observableArray(),
    //on "add" click in "add site" form
    addSite: function(){
        var $form = $('#add_site_form');
        var siteUrl = $form.find('input[name="site"]').val();

        /*nifty hack  <----
        var sites = this.sites();
        sites.push(new siteObject(siteUrl));
        this.sites(sites);*/

        this.sites.push(new siteObject(siteUrl));
    },
    //on "remove sites" button click
    removeSites: function() {
        var sitesToRemove = [];
        $.each(this.sites(), function(){
            if (this.toDelete) sitesToRemove.push(this);
        });
        if (sitesToRemove.length == 0)
            alert("Ни одного сайта не было выбрано для удаления.");
        else {
            var message = "Вы точно хотите перестать отслеживать";
            for (var i in sitesToRemove) {
                message += "\n\"" +  sitesToRemove[i].url + "\"";
            }
            message += "?";
            if (confirm(message)) {
                $.each(sitesToRemove, function(){this.remove()});
                //save new sites list to db
                this.saveSitesListToDb();
            }
        }   
        //hide form
        $('#remove_sites_form').slideToggle();
        //toggle checkboxes
        $('#content_sites_list .site_info input[type="checkbox"]').slideToggle();
    };

还有模板：

<!-- end of menu -->
<div id="content_sites_list" 
     class="grid_12" 
     data-bind="template: {name: 'sites_list_template', foreach: sites}"></div>

  <!-- Templates -->

  <script id="sites_list_template" type="text/x-jquery-tmpl">
    <div class="site">
        <div class="site_panel grid_12">
            <div class="site_info">
                &ndash;
                <input type="checkbox" value="${url}" 
                       class="delete_checkbox" data-bind="checked: toDelete" /> 
                <a href="${url}" class="show_site_stat">${url.substr(7)}</a>
                {{if status == "200"}}
                    <img src="img/green_light.png" alt="ok"/>
                {{/if}}             
            </div>
            <div class="site_stat">
                <div class="site_last_check">Последняя проверка: ${dateTimestamp}</div>
            </div>
        </div>
    </div>
  </script>

我已经在最新的 knockoutjs 测试版和稳定版上尝试过这个。

Answer 1

我制作了一个jsFiddle，效果很好。

JSLint 抱怨 viewModel 的 removeSites 函数中存在一些问题。我修复了这些问题并添加了一个按钮和输入字段，以便能够提供一些输入，一切顺利。

所以您可以尝试更新您的 removeSites 函数，看看它是否对您有帮助，