0

バックボーンアプリにこのビューがあり、

app.TabbedInterfaceView = Backbone.View.extend({

tagName: 'article',
className: 'project_info',

template: _.template($("#tpl-projects-tabs").html()),

events: {
    'mouseover .tabs ul.nav li' : 'activeTab',
    'mouseleave .tabs ul.nav li' : 'unactiveTab',
    'click .js-tab-link, span.new' : 'showHideContent',
    'click .closed' : 'showContent',
    "click .js-open-task-adder-form": "openTaskAdder",
},

initialize: function() {
    //this.render();
},

render: function() {
    console.log("TabbedInterfaceView triggered");
    console.log(app.tasks);
    var completedTasks = [];

    $.each(app.tasks.models, function(key, value) {
        if(value.attributes.completed != "active") {
            console.log("here");
            completedTasks.push(key);
        }
    });

    this.$el.empty().append(this.template({
        p: app.project.toJSON(),
        dates: app.projectDates,
        files: app.fileDetails,
        tasks: app.tasks,
        completedTasks: completedTasks
    }));

    return this;
 }
});

これはこのテンプレートを使用し、

<div class="tabs">
    <ul class="nav">
        <li class="actived open"><a href="#brief" class="tab-link js-tab-link"><span class="expander"></span>Brief + Notes</a><span class="new"></span></li>
        <li class=""><a href="#dates" class="tab-link js-tab-link"><span class="expander"></span>Dates</a><span class="new"></span></li>
        <li class=""><a href="#files" class="tab-link js-tab-link"><span class="expander"></span><%= files.count %> Files</a><span class="new fileinputbar-button js-add-files list-header-add">+</span></li>
        <li class=""><a href="#tasks" class="tab-link js-tab-link"><span class="expander"></span><%= completedTasks.length %> / <%= tasks.length %> Tasks</a><span class="new fileinputbar-button js-open-task-adder-form list-header-add"></span></li>
    </ul>

私がやりたいことはtasks、新しいタスクが保存されたときに変数を更新することです。タスクを保存するコードは次のようになります。

submitFormCheck: function(e) {

    if (e) {
        e.stopImmediatePropagation();
        e.preventDefault();
    }
    var self = this;


    //do some checking to see if form is empty
    if (this.formInput.val().trim() === '') {
        this.formInput.addClass(this.errorClass);
    } else {
        this.formInput.removeClass(this.errorClass);


        var date;
        date = new Date();
        date = date.toISOString();
        // date = date.getUTCFullYear() + '-' +
        // ('00' + (date.getUTCMonth()+1)).slice(-2) + '-' +
        // ('00' + date.getUTCDate()).slice(-2) + ' ' +
        // ('00' + date.getUTCHours()).slice(-2) + ':' +
        // ('00' + date.getUTCMinutes()).slice(-2) + ':' +
        // ('00' + date.getUTCSeconds()).slice(-2);

        this.collection.create({
            task_name: this.formInput.val(),
            project_id: this.projectId,
            parent_id: this.parentId,
            parent_type: this.parentType,
            completed: 'active',
            created_on: date,
            item: this.itemName,
            stage: this.subItemName

        }, {
            wait: true,
            success: function() {
                self.formInput.val('');
                self.formInput.focus();
            }
        });
    }
},

これを成功のコールバックに追加できると思ったのですが、

var tabbedInterface = app.TabbedInterfaceView;
tabbedInterface.render()

しかし、これは何もしないようです。この投稿の上部にある render メソッドを見ることができます。タブビューを再レンダリングするとうまくいくと思いましたが、うまくいきません。

4

1 に答える 1

1

app.TabbedInterfaceView;をインスタンス化するには、new を呼び出す必要があります。

var tabbedInterface = new app.TabbedInterfaceView();
tabbedInterface.render();

app.TabbedInterfaceViewまた、タスクへの変更をリッスンし、render を呼び出すイベント ハンドラーをバインドすることもできます。

app.TabbedInterfaceView = Backbone.View.extend({
   initialize: function() {
     this.listenTo(app.tasks,'change',this.render); // when app.tasks changes - re-render
   },
   // your existing code below //
于 2013-07-30T08:02:04.960 に答える