如何在 Ember JS 中获取模型数据

Posted 2023-02-26

【中文标题】如何在 Ember JS 中获取模型数据

【英文标题】：How to get model data on view in Ember JS

【发布时间】：2015-11-25 13:27:59

【问题描述】：

如何在 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>

谢谢！

【参考方案1】：

Route 设置了一个“模型”变量，您的模板可以通过以下方式访问：

model.myProperty 或 myProperty（在 Ember2 之前，这种方式会查找您的控制器计算属性。如果不存在，那么它将通过 model.myProperty 代理。See this deprecation）

为了使模型数据在“Ember 之外”可访问，您可以：

创建组件 从模板中调用它并将数据向下传递给它 使用onDidInsertElement 并读取属性。从现在开始，您可以让“外部世界”访问它

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

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

【讨论】：

感谢您的回复，但我如何将其存储在 javascript 变量中以便在同一 html 页面中的另一个 js 脚本中使用？

【参考方案2】：

如果你想在不同的模板中使用它（我猜它链接到不同的控制器？），你可以像这样在另一个控制器中创建一个别名：

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

我对您构建应用程序的方式没有太多精确度，但如果您无法从其他模板访问它，则意味着您更改了应用程序上下文（firstController -> secondController）。

你有 2 个控制器吗？