Question

如何在Ember JS的视图模板中访问模型数据？它是保存在全局变量中吗？

这是我的模板：

<script type="text/x-handlebars" data-template-name="todo-list">
    {{#if length}}
    <section id="main">
        {{#if canToggle}}
        {{input type="checkbox" id="toggle-all" checked=allTodos.allAreDone}}
        {{/if}}
        <ul id="todo-list">
            {{#each}}
            <li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
                {{#if isEditing}}
                {{todo-input type="text" class="edit" value=bufferedTitle focus-out="doneEditing" insert-newline="doneEditing" escape-press="cancelEditing"}}
                {{else}}
                {{input type="checkbox" class="toggle" checked=isCompleted}}
                <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
                <button {{action "removeTodo"}} class="destroy"></button>
                {{/if}}
            </li>
            {{/each}}
        </ul>
    </section>
    {{/if}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
    <section id="todoapp">
        <header id="header">
            <h1>todos</h1>
            {{todo-input id="new-todo" type="text" value=newTitle action="createTodo" placeholder="What needs to be done?"}}
        </header>
        {{outlet}}
        {{#if length}}
        <footer id="footer">
            <span id="todo-count"><strong>{{remaining.length}}</strong> {{pluralize 'item' remaining.length}} left</span>
            <ul id="filters">
                <li>
                    {{#link-to "todos.index" activeClass="selected"}}All{{/link-to}}
                </li>
                <li>
                    {{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}}
                </li>
                <li>
                    {{#link-to "todos.completed" activeClass="selected"}}Completed{{/link-to}}
                </li>
            </ul>
            {{#if completed.length}}
            <button id="clear-completed" {{action "clearCompleted"}}>Clear completed</button>
            {{/if}}
        </footer>
        {{/if}}
    </section>
    <footer id="info">
        <p>Double-click to edit a todo</p>
    </footer>
</script>

谢谢！

Answer 1

Route设置“模型”变量，模板可通过以下方式访问该变量：

{{model.myProperty}}或
{{myProperty}}（在Ember2之前，这种方式会查找您的Controller Computed Properties。如果不存在，那么它将通过model.myProperty代理。See this deprecation）

为了使模型数据可以“Ember的外部”，你可以：

创建组件
从模板中调用它并将数据传递给它
使用onDidInsertElement并阅读该属性。从现在开始，您可以访问“outisde world”

OBS：我不确定这是一个好习惯。

JS BIN：http://emberjs.jsbin.com/dapidu/3/edit?html,js,output

Answer 2

如果你想在另一个模板中使用它（我想连接到不同的控制器？），你可以在另一个控制器中创建一个别名，如下所示：

//Include the first controller
needs: ['todoController'],
length: Ember.computed.alias('controllers.todoController.length'),

我对构建应用程序的方式没有太多准确，但是如果你无法从其他模板访问它，则意味着你要更改应用程序上下文（firstController - ＆gt; secondController）。

你有2个控制器吗？

如何在Ember JS中获取视图上的模型数据

2 个答案: