Backbone View元素不附加属性

时间:2012-10-02 06:50:14

标签: javascript jquery backbone.js backbone-views

我正在尝试使用其他视图中的所选名称列表附加HTML TD标记。它会产生一个空div标签。列表包含逗号分隔值。你能解释一下如何将属性附加到视图元素吗?

以下是基本视图中的代码,它将TD作为视图元素传递。

base view
--------

                            var model = new DataNames();
                      var view = new SearchDataView({
                                model:model
                            });
                view.render().showModal({
                    x: event.pageX,
                    y: event.pageY
                            });
                            var dName = new DataNamesView({
                                    el: "#dataName"  // this needs to be populated
                            });
                            dName.render();

subview 1 --- this view gets called from base view

 SearchDataView = Backbone.ModalView.extend(
        {
        name: "SearchDataView",
        model: DataNames,
        templateHtml :  
                "<div id='select'><span>Search name</span>" +
                "<table border='1'>"+
                "<tr>"+
                "<td><input type='checkbox' value='test1'></td>"+
                     "<td name='selected'>test1</td>"+
                     "<td></td>"+
                     "<td></td></tr>"+
                     "<tr>"+
                "<td><input type='checkbox' value='test2'></td>"+
                     "<td name='selected'>test2</td>"+
                     "<td></td>"+
                     "<td></td></tr>"+

"</table><button id='select'>Select</button></div>", 


                initialize: function(){
                _.bindAll( this, "render");
                                this.template = _.template( this.templateHtml);
                        },
        events: {
                "click #select": "select"
                        },
                select: function(){
                                 var allVals = [];
                                 $('#select :checked').each(function() {
                                   allVals.push($(this).val());
                                 });
                                 alert(allVals);
                                 this.model.set("name",allVals);
                                 var dName = new DataNamesView({selectedList: allVals});
                                 dName.render();
                                 this.hideModal();
                              },        
        render: function(){
                            $(this.el).html(this.templateHtml); 
                            return this;
            }
    });


subview 2
----------  

        DataNamesView = Backbone.ModalView.extend(
        {
        name: "DataNamesView",

                initialize: function(){
            _.bindAll( this, "render");
                            var selectedList = this.options.selectedList;
                        },
        events: {

                        },
                render: function(name){
                                alert("selected from names view"+this.options.selectedList);

                                this.el.innerHTML = "testing";// this works fine
                            // $(this.el).html(this.options.selectedList); //does not work 
                            //this.el.innerHTML = this.options.selectedList;//does not work
                            //this.$el.append(this.options.selectedList); //does not work
                            return this;
                           }
    });

0 个答案:

没有答案