触发事件后,复选框仍未选中

时间:2012-01-29 18:22:11

标签: backbone.js

我有以下观点:

   window.DmnView = Backbone.View.extend({
        template: _.template($("#tmpl_dmnListItem").html()),
        events: {
            "click .getWhois": "showWhois",
            "click .getDomain": "toBasket"
        },
        initialize: function() {
            this.model.bind('change', this.render, this);
            this.model.bind('destroy', this.remove, this);
            this.bind('toBasket', dmnListApp.toBasket, this);
        },
        render: function() {
            return $(this.el)
                    .attr("class", this.model.get("free") ? "dmnItem green" : this.model.get("checked") ? "dmnItem red" : "dmnItem red loader")
                    .html(this.template(this.model.toJSON()));
        },
        remove: function() {
            $(this.el).remove();
        },
        showWhois: function() {
            showBoxes(this.model.get("info"));
            return false;
        },
        toBasket: function() {
            this.model.toBasket();
            this.trigger('toBasket');
        }
    });

    window.DmnListApp = Backbone.View.extend({
        el: $("#regWrap"),
        events: {
            "keypress #dmnName": "checkAll"
        },
        initialize: function() {
            this.input = this.$("#dmnName");
            this.list = this.$("#dmnList");
            this.basket = this.$("#dmnBasket");
            dmnList.bind('add', this.addOne, this);
            dmnList.bind('all', this.render, this);
        },
        render: function() {

        },
        addOne: function(dmnItem) {
            var view = new DmnView({model : dmnItem});
            this.list.append(view.render());
        },
        checkOne: function(name, zone, price, days) {
            dmnList.create({name: name, zone: zone, price: price, days: days});
        },
        checkAll: function(e) {
            var name = this.input.val();
            if (!name || e.keyCode != 13) return;
            if (name == "")
                name = "yandex";
            dmnList.destroyAll();
            var zoneList = dmnList.domainsInfo.Name;
            var costList = dmnList.domainsInfo.CostOrder;
            var daysList = dmnList.domainsInfo.DaysToProlong;
            var parent = this;
            $.each(zoneList, function(key, zone) {
                parent.checkOne(name, zone, costList[key], daysList[key]);
            });
            this.input.val("");
        },
        toBasket: function(){
            if (this.model.get("inBasket")){
                dmnListApp.basket.append($(this.el));
            }else{
                dmnListApp.list.append($(this.el));
            }
        }
    });

我有DmnItem View的以下模板:

<script id="tmpl_dmnListItem" type="text/template">
    <%= checked&&free ? "<input type='checkbox' class='getDomain' />" : ""%><%= name %>.<%= zone %> <%= (free || !checked ) ? (checked) ? '<p class="fr">'+price+" руб./"+days+'</p>' : "" : "<a href='#' class='getWhois fr'>WhoIs</a>" %>
 </script>

DmnView使用“getDomain”类侦听单击元素。此元素是复选框。我点击这个复选框。在两个视图中调用toBasket()方法后,我看到仍未选中复选框。为什么会这样?

2 个答案:

答案 0 :(得分:5)

错误在渲染中。在为模型的属性设置新值后,调用视图的函数并“重绘”复选框(因此,它可能是主干的错误 - 重新渲染后,复选框的状态不会保存)。所以我在模板中添加了一个短行,如有必要,可以为复选框添加“已选中”属性。

答案 1 :(得分:0)

在功能toBasket(或其他)中可能出现问题。脚本可以在到达处理程序结束之前停止。