html文件如下:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>Insert title here</title>
-
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
-
<script type="text/javascript" src="./js/emberjs/handlebars-v1.3.0.js"></script>
-
<script type="text/javascript" src="./js/emberjs/ember.js"></script>
-
<script type="text/javascript" src="./js/emberjs/ember-data.js"></script>
-
<script type="text/javascript" src="./js/app.js"></script>
-
</head>
-
<body>
-
<script type="text/x-handlebars" >
-
{{view App.CateView content=first }}
-
first.name={{first.name}}
-
</script>
-
</body>
-
</html>
-
-
<script type="text/x-handlebars" data-template-name="cate1">
-
<div style="display:inline-block;width:100px;">
-
hello,I am here
-
view.content.name={{view.content.name}}
-
controller.first.name={{controller.first.name}}
-
finished
-
<div>
-
</script>
上面的代码的第14行表示此处插入一个view, 第二个参数表示view的Class名字, 后续的参数都会已名值对的形式插入到view对象中去;
22-27行定义了一个view;
其中可以使用view,controller访问view,和controller中的对象;controller.first直接来源于
App.ApplicationControlle,而view.content则来源于14行的content=first;
从handlebars的源码:
-
templateName = script.attr('data-template-name') || script.attr('id') || 'application',可见末班中的这个属性值效果
-
另外由于代码很复杂,想找到一个调试点都不容易,可以通过写错误模板的情况下让程序报错找到切入点;如本处的代码就是通过在第14行写上content=first();语法报错发现的.
app.js如下:
-
App = Ember.Application.create();
-
-
App.ApplicationController=Ember.Controller.extend({
-
first:{name:"testname",hi:function(){alert ("first")}},
-
view:{name:"viewname"},
-
});
-
App.CateView = Ember.View.extend({templateName: 'cate1',//跟程序中的模板挂钩
-
name:"haha",
-
didInsertElement:function(){
-
//var content=this.get("content");
-
},
-
})
阅读(1040) | 评论(0) | 转发(0) |
