3

誰かが私を助けてくれることを願って、

私はバックボーン ビューを持っています。これは基本的に HTML のスケルトンです。HTML はタブ付きのインターフェイスを構築し、各タブには明らかにリンクとコンテンツ領域があります。私が望んでいるのは、コンテンツごとに、そのタブに固有の個々のバックボーン テンプレートをレンダリングすることです。

たとえば、タブ#briefsでレンダリングしたいと思いますapp.projectBriefsView。これをどのように行うかは図の生涯ではできません。ここに、他のすべてをロードしたい「ベース/マスター」ビューがあります。

app.ProjectsTabsView = Backbone.View.extend({

    el: "header.project",

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

    events: {
        'click .js-tab-link': 'showTab',
    },

    initialize: function() {
        this.render();
        var briefView = new app.projectBriefView;

        briefView.render().el;
    },

    render: function() {

        this.$el.append(this.template());


        return this;
    },

    showTab: function(el) {
        var tabRequired = $(el.currentTarget).attr("href");
        console.log(tabRequired);
        $(".tab-content.active").css("display", "none").removeClass("active");
        $(".tab-content"+tabRequired).addClass("active").css("display", "block");

        el.preventDefault();
    }

});

テンプレート

<script type="text/template" id="tpl-projects-tabs">    
    <div class="tabs">
        <ul>
            <li><a href="#brief" class="tab-link js-tab-link active">Brief + Notes</a></li>
            <li><a href="#dates" class="tab-link js-tab-link">Dates</a></li>
            <li><a href="#files" class="tab-link js-tab-link">Files</a></li>
            <li><a href="#tasks" class="tab-link js-tab-link">Tasks</a></li>
            <li><a href="#messages" class="tab-link js-tab-link">Messages</a></li>
            <li><a href="#comments" class="tab-link js-tab-link">Comments</a></li>
        </ul>
        <div class="tab-content js-tab-content active" id="brief">Briefs</div>
        <div class="tab-content js-tab-content" id="dates">Dates</div>
        <div class="tab-content js-tab-content" id="files">Files</div>
        <div class="tab-content js-tab-content" id="tasks">Tasks</div>
        <div class="tab-content js-tab-content" id="messages">Messages</div>
        <div class="tab-content js-tab-content" id="comments">Comments</div>
    </div>
</script>

これが、この領域にロードしたいビューです.tab-content#brief。

app.projectBriefView = Backbone.View.extend({
el: ".tab-content",

template: _.template($("#tpl-brief-notes").html()),

events: {

},

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

render: function() {

    this.$el.append(this.template({
        p: app.project.toJSON()
    }));

    return this;
}

});

テンプレート

<script type="text/template" id="tpl-brief-notes">
    <div class="project_info_content">
        <!-- New brief form -->
        <div class="brief">
            <h4>Brief</h4>
            <% if (p.is_owner) { %>
                <div class="js-brief-text"> 
            <% if (p.brief == undefined || p.brief == '') { %>
                <p class="add-text">No Brief, Click to add</p>
                <% } 
                } else { %>
                <div>
            <% } 
                    if (p.brief != undefined || p.brief != '') { %>
                    <% //p.brief %>
                        <?= nl2br(str_replace('  ', ' &nbsp;', htmlspecialchars($project['brief']))); ?>
                    <% } %>
                </div>
                <div class="inline-edit">
                    <% if (p.is_owner) { %> 
                        <form action="<?= base_url(); ?>projects/edit_brief/<%= p.id %>" method="post" accept-charset="utf-8" class="inline_edit edit_brief" novalidate="novalidate">
                            <p>
                                <textarea name="brief" class="brief_edit"><%= p.brief %></textarea>
                                <input type="submit" name="submit" value="Update"><a class="cancel" href="#">Cancel</a>
                            </p>
                        </form>
                    <% } %>
                </div>
            </div>
            <!-- End of new brief form -->
            <!-- New additional notes form -->
            <div class="additional_notes">
                <h4>Additional notes <span class="instructions">(Editable by other users)</span></h4>
                <div class="js-notes-text">
                    <%
                    if (p.additional_info == undefined || p.additional_info == '') { %>
                        <p class="add-text">No Notes, Click to add</p>
                    <% } else { %>
                    <% // p.additional_info %>
                    <?= nl2br(str_replace('  ', ' &nbsp;', htmlspecialchars($project['additional_info']))); ?>
                    <% } %>
                </div>
                <div class="inline-edit">
                    <form action="<?= base_url(); ?>projects/edit_additional_info/<%= p.id %>" method="post" accept-charset="utf-8" class="inline_edit edit_notes" novalidate="novalidate">                 <p>
                        <textarea name="text_details" class="notes_edit"><%= p.additional_info %></textarea>
                        <input type="submit" name="submit" value="Update">                      <a class="cancel" href="#">Cancel</a>
                    </p>
                    </form>
                </div>
            </div>
        </div>
        <!-- End of new additional notes form -->
    </div>
</script>

app.ProjectTabsViewレンダリング機能では、次のようなことができると思いました。

var brief = new app.projectBriefView(); brief.render().el();

出力をブラウザにスローしますが、これは機能していないようです。バックボーンで部分ビューと呼ぶものを操作するより良い方法はありますか? パーシャルをブラウザに取得するにはどうすればよいですか?

4

1 に答える 1

1

バックボーン ビューはブラウザに html を動的に取り込むことができるdivため、コンテンツに必要な要素は 1 つだけです。このdiv要素は、タブを管理するビューによって生成されるネストされたビューのプレースホルダーとして機能します。

私は非常によく似た問題を解決しなければなりませんでした。

まず、タブ タイトルをビュー コンストラクターにバインドする制御構造を定義します。

var Tab = function( title, viewConstructor ) {
      this.title = title;
      this.viewConstructor = viewConstructor;
    };

_.extend( Module.prototype, {
  render : function( options ) {
    this.view = new this.viewConstructor( options );
    return this.view.render();
  },
  close  : function() { 
    if( this.view ) {
      this.view.close();
    }
  }
});

次に、配列内のすべてのタブを定義します。

var tabs = [
  new Tab('brief', app.projectBriefView),
  new Tab('dates', app.projectDatesView),
  //...
]

テンプレートを少しクリーンアップする必要があります。

<script type="text/template" id="tpl-projects-tabs">    
  <div class="tabs">
    <ul>
        <li><a href="#brief" id="brief" class="tab-link js-tab-link active">Brief + Notes</a></li>
        <li><a href="#dates" id="dates" class="tab-link js-tab-link">Dates</a></li>
        <li><a href="#files" id="files" class="tab-link js-tab-link">Files</a></li>
        <li><a href="#tasks" id="tasks" class="tab-link js-tab-link">Tasks</a></li>
        <li><a href="#messages" id="messages" class="tab-link js-tab-link">Messages</a></li>
        <li><a href="#comments" id="comments" class="tab-link js-tab-link">Comments</a></li>
    </ul>
    <div class="tab-content js-tab-content" id="tab-content">Briefs</div>
  </div>
</script>

最後に、イベントでそれらを使用する必要があります。

//...
showTabs : function( event ) {
  event.preventDefault();

  var clicked = $(el.currentTarget),
      title = clicked.attr("href").replace("#", ""),
      tab = _.findWhere( tabs, { title : title });

  // always cleanup the preceding tab.
  if ( this.activeTab ) {
    this.activeTab.close();
  }

  this.activeTab = tab;
  this.$('ul > li > .active').removeClass('active');      
  this.$('#tab-content').html( tab.render().el );
  clicked.addClass('active');
}
于 2013-06-17T23:37:35.923 に答える