Question

我在我的骨干应用程序中有这个视图，

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方法。我做了大量错误的事情，我认为重新渲染我的标签视图会起作用，但事实并非如此。

Answer 1

您需要调用new来实例化app.TabbedInterfaceView;

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

此外，您可能希望绑定一个事件处理程序，在您app.TabbedInterfaceView中侦听任务更改并调用呈现。

app.TabbedInterfaceView = Backbone.View.extend({
   initialize: function() {
     this.listenTo(app.tasks,'change',this.render); // when app.tasks changes - re-render
   },
   // your existing code below //

更新另一个模板主干中的变量

1 个答案: