ember.js + 把手：渲染 vs 出口 vs 部分 vs 视图 vs 控制

1个回答

Mental flow

2025-06-19 10:00

Ember.JS 是一个流行的 JavaScript 框架，它提供了一种优雅的方式来构建复杂的 Web 应用程序。在 Ember.JS 中，有几个概念非常重要，包括渲染、出口、部分、视图和控制。本文将介绍这些概念，并通过案例代码来说明它们的使用。

渲染

在 Ember.JS 中，渲染是指将数据和模板结合起来生成最终的 HTML 内容的过程。这个过程通常发生在控制器或路由中，通过使用模板语法和绑定机制，可以很方便地将数据动态地渲染到页面上。

下面是一个简单的例子，展示了如何使用 Ember.JS 渲染一个简单的列表：

Javascript
// 定义一个控制器
App.IndexController = Ember.Controller.extend({
  items: ['item1', 'item2', 'item3']
});
// 定义一个模板
<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each items as |item|}}
      <li>{{item}}</li>
    {{/each}}
  </ul>
</script>

在上面的例子中，控制器定义了一个名为 items 的属性，它包含了一个简单的字符串数组。模板使用了 {{#each}} 块来循环遍历 items 数组，并将每个元素渲染为一个列表项。当控制器和模板结合起来时，渲染过程会将 items 数组中的每个元素都渲染为一个

元素，最终生成一个包含了所有列表项的

出口

{{outlet}}

Javascript
// 定义一个路由
App.Router.map(function() {
  this.route('about');
});
// 定义一个包含出口的模板
<script type="text/x-handlebars" data-template-name="application">
  <h1>My App</h1>
  <div class="content">
    {{outlet}}
  </div>
</script>
// 定义一个关联出口的模板
<script type="text/x-handlebars" data-template-name="index">
  Welcome to my app!
</script>
// 定义另一个关联出口的模板
<script type="text/x-handlebars" data-template-name="about">
  
<img src="https://img.izhida.com/topic/d52387880e1ea22817a72d3759213819.jpg" alt="Java"><br>Java
About page
</script>

{{outlet}}

this.route('about')

about

部分

{{partial}}

Javascript
// 定义一个包含部分的模板
<script type="text/x-handlebars" data-template-name="application">
  <h1>My App</h1>
  {{partial "header"}}
  <div class="content">
    {{outlet}}
  </div>
</script>
// 定义一个部分模板
<script type="text/x-handlebars" data-template-name="_header">
  Welcome to my app!
</script>

{{partial "header"}}

header

_header

视图

Javascript
// 定义一个视图
App.MyView = Ember.View.extend({
  templateName: 'my-view',
  click: function() {
    alert('You clicked the view!');
  }
});
// 定义一个关联的模板
<script type="text/x-handlebars" data-template-name="my-view">
  <button>Click me</button>
</script>

MyView

click

控制

Javascript
// 定义一个控制器
App.MyController = Ember.Controller.extend({
  actions: {
    showAlert: function() {
      alert('Hello, Ember!');
    }
  }
});
// 定义一个关联的模板
<script type="text/x-handlebars" data-template-name="my-template">
  <button {{action 'showAlert'}}>Click me</button>
</script>

MyController

actions

showAlert

举报有用（4）分享收藏

ember.js + 把手：渲染 vs 出口 vs 部分 vs 视图 vs 控制

1个回答

Mental flow

热门话题

相关问题