Ember应用程序中的外部把手模板

时间:2013-03-20 19:50:17

标签: ember.js handlebars.js

我有以下代码

    Todos = Ember.Application.create();

    Todos.Todo = Ember.Object.extend({
        title: null,
        isDone: false
    });

    Todos.TodosController = Ember.Object.extend({
        // We need an array to hold our Todo objects
        todos: Ember.A(),

        init: function(){
            debugger;
            var items = this.get('todos');
            items.addObject(Todos.Todo.create({title: "This is an Ember Item"}));
            items.addObject(Todos.Todo.create({title: "This is another Ember Item"}));
        },

        remainingCount: function(){
            return this.get('todos').filterProperty('isDone', false).length;
        }.property('todos.@each.isDone')

    });

    Todos.controller = Todos.TodosController.create();

    Todos.TodoView = Ember.View.extend({
        templateName: 'todos'
    });

</script>

我在thml内部定义了以下把手钩子。但由于某种原因,模板没有被渲染。当我检查Handlebars.templates时,我看到返回的对象中列出的待办事项。我在这里错过了什么。

enter image description here

修改

是否可以在.handlebars文件中定义模板?

修改

我在app.js中做了这个。

$.extend(Ember.TEMPLATES, Ember.TEMPLATES, Ember.Handlebars.templates);

但这似乎也没有帮助。如下图所示,模板现在列在Ember.TEMPLATES中。但出于某种原因,它并没有把它们捡起来。

enter image description here

我身体标签之间也没有任何html。我不确定我是否应该有任何东西。

<body></body>

2 个答案:

答案 0 :(得分:1)

已经回答here

要预编制把手模板,您必须安装ember-precompile package

如果您需要make实用程序(在Mac上)install it

然后将预编译的模板包含到index.html中,如下所示:

    <script type="text/javascript">
        App = Ember.Application.create({});
    </script>
    <!-- templates -->
    <script src="js/templates/templates.js"></script>
    <!-- app init -->
    <script type="text/javascript">
        App.initialize();
    </script>

答案 1 :(得分:0)

@MilkyWayJoe

你对应用程序模板所说的话对我有所帮助。我认为我的预编译器是造成我问题的原因。我现在可以在应用程序模板中查看我的部分内容。但是,linkTo似乎由于某种原因不起作用。如果我在html页面中声明模板,linkTo有效!!

这是上下文中的预编译器。 http://blog.selvakn.in/2012/05/precompiling-handlerbars-tempates-with.html

我现在可以查看文件了。然而,需要将以下行添加到app.js以使其正常工作。

// To register partials
$.each(Ember.Handlebars.templates, function(i, template){
    if(i.indexOf('_') === 0){
        Ember.Handlebars.partials[i.substring(1, i.length)]  = template;
    }
});

// To let Ember.Handlebars know about the newly added templates
$.extend(Ember.TEMPLATES, Ember.TEMPLATES, Ember.Handlebars.templates);

帮助我的方法是先将模板一次添加到html主体,然后将它们移动到自己的文件中。还要记住,data-template-name不是您可以忽略的属性。如果有的话,它会导致各种各样的问题。

修改

此节点包效果更好。

Emberjs Handlebars precompiling