从简单模型访问单个记录

时间:2014-05-02 18:17:44

标签: ember.js

我开始很简单,试图从简单模型中显示单个值。

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: --&gt;{{title}}&lt;--</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({

});

1 个答案:

答案 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>

行动中的示例

http://emberjs.jsbin.com/OxIDiVU/443/edit