Question

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

如果我将使用漂亮的黑客（在代码中注释）将整个数组替换为新数组，那么一切都会有效。

BTW，我通过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功能并查看它是否对您有所帮助，

KnockoutJS：模板没有更新可观察的数组更改（仅在添加时，适用于删除）

1 个答案: