我开始很简单,试图从简单模型中显示单个值。
This answer到"accessing the model from the template"表明有必要扩展ObjectController。此时,没有应用程序逻辑,因此它似乎不是真正需要控制器(或视图)。
同样,还没有路线,所以除了App.IndexRoute之外似乎不需要任何东西。
字典夹具中的单个对象具有值为Hello Ember
的title属性。我希望看到两个硬编码箭头之间显示的文字。相反,我得到的只是箭头。
Index.html是:
<!DOCTYPE html>
<html>
<head>
<title>Dictionary</title>
</head>
<body>
<!-- Main body of the application -->
<script type="text/x-handlebars">
<p>Title: -->{{title}}<--</p>
</script>
<!-- ... Ember.js and other JavaScript dependencies ... -->
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app/application.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/models/dictionary_model.js"></script>
<script src="js/controllers/dictionary_controller.js"></script>
</body>
</html>
然后是JavaScript:
// application.js
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
// router.js
App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('dictionary', 0);
}
});
// dictionary_model.js
App.Dictionary = DS.Model.extend({
title: DS.attr("string")
});
App.Dictionary.FIXTURES = [
{
id: 0,
title: "Hello Ember"
}];
// dictionary_controller.js
App.DictionaryController = Ember.ObjectController.extend({
});
答案 0 :(得分:1)
我不确定您在文档中阅读的内容是否相互矛盾,请使用相互矛盾的陈述更新您的问题,以便修复它们。
如果需要添加其他计算属性,操作或其他方法,则只需要定义控制器。在你的情况下,你是正确的,因为它不需要定义。
话虽如此,application
模板(或您的案例中未命名的模板)是您的余烬应用的根。任何子路由/资源都将在应用程序模板中的{{outlet}}
中呈现(下面的示例)。
index
路线是application
路线下方的路线。资源被认为是可以有孩子并且通常与模型相关联的路线。
这一切都归结为您所看到的主要问题。您已从索引路径返回模型,但您正尝试在应用程序路径的模板中使用它。
这是您的代码的简化版本
App = Ember.Application.create();
App.ApplicationAdapter= DS.FixtureAdapter;
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('dictionary', 0);
}
});
App.Dictionary = DS.Model.extend({
title: DS.attr("string")
});
App.Dictionary.FIXTURES = [
{
id: 0,
title: "Hello Ember"
}];
<script type="text/x-handlebars">
<h2>Application Template</h2>
Here we Are in the Application Template
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Template</h2>
{{title}}
</script>