0

我有多个模型,每个模型都有自己的模板。我想在不同的模板中共享一个按钮的页脚,因此当按下相同的按钮时,会根据所选模板执行不同的功能。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>
4

2 回答 2

1

您可能想使用{{partial}}帮助程序。当它被调用时,它将内联一个模板(具有相同的上下文)。

要使用部分帮助器,只需创建一个带有前导下划线的模板,例如 : _buttons。要包含该模板,您现在可以使用{{partial "buttons"}}.

请参阅:http ://emberjs.com/guides/templates/rendering-with-helpers/

于 2013-11-01T16:30:18.103 回答
0

您可以使用页脚保留应用程序模板,以便插入到插座中的所有模板都将具有页脚。

要获取触发到某个相应模板的动作,只需覆盖该模板的路由,例如在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/

要小心,因为如果某些路由没有实现某些触发操作,则会引发错误。在这种情况下,您可以将页脚提取到 apartial并添加使用的位置。

我希望它有帮助

于 2013-11-01T16:32:25.310 回答