在ember.js中共享不同模板的按鈕

Question

我有多個模型，每個模型都有自己的模板。 我想在不同模板上共享按鈕的頁腳，以便在按下同一按鈕時根據所選模板執行不同的功能。 HTML看起來像這樣：

    <script type="text/x-handlebars" id="application" >
       <menu>
          <nav>
             <ul>
               <li>{{#link-to 'model1'}}Model 1{{/link-to}}</li>
               <li>{{#link-to 'model2'}}Model 2{{/link-to}}</li>
               <li>{{#link-to 'model3'}}Model 3{{/link-to}}</li>
             </ul>
          </nav>
       </menu>

       <div class="content">
         <section>
           {{outlet}}
         </section>
       </div>

      <footer>
        <ul>
          <li><button class="action-undo" {{action undo}}>Undo</button></li>
          <li><button class="action-save" {{action save this}}>Save</button></li>
          <li><button class="action-saveContinue" {{action saveAndContinue this}}>Save & Continue</button></li>
        </ul>
      </footer>
    </script>

Answer 1

您可能想使用{{partial}}助手。 調用時，它將內聯模板（具有相同的上下文）。

要使用部分幫助器，只需創建一個帶有下划線的模板，例如： _buttons 。 要包括該模板，您現在可以使用{{partial "buttons"}} 。

請參閱： http : //emberjs.com/guides/templates/rendering-with-helpers/

Answer 2

您可以將應用程序模板保留在頁腳中，以便插入插座的所有模板都具有頁腳。

要獲取觸發某個相應模板的動作，只需覆蓋該模板的路由，例如在model1模板中，您可以創建一個App.Model1Route實現這些動作：

App.Model1Route = Ember.Route.extend({
    actions: {
        undo: function() {
            // perform undo
        },
        save: function() {
            // perform save
        },
        saveAndContinue: function() {
            // perform save and continue
        }
    }
});

對於model2模板，只需重寫App.Model2Route並在該模板中添加要觸發的動作，依此類推。

看一看小提琴，看看能正常工作的http://jsfiddle.net/marciojunior/d3xA6/

請注意，因為如果某些路由未執行某些觸發的操作，則會引發錯誤。 在這種情況下，您可以將頁腳提取為partial然后僅添加使用位置。

希望對您有所幫助