閱讀(6k) 書簽贊(0) 我要糾錯(cuò)

EmberJS 控制器

2018-01-03 16:17 更新

您可以通過使用控制器使模型的顯示邏輯更具吸引力，其中模型屬性保存到服務(wù)器，其中控制器屬性不會(huì)保存到服務(wù)器。

關(guān)于耦合的注釋

下圖顯示了模板，控制器和模型的耦合：

模板與控制器相關(guān)，并從中獲取其屬性。
模板處理控制器和控制器處理模型。
模型不知道正在裝飾它的控制器，并且控制器不知道代表其屬性的視圖。

表示模型

Ember.js控制器具有代理屬性，因此您可以直接調(diào)用模板中的屬性。模板將屬性與模型分開，并始終連接到控制器，而不是模型。

例如，您可以從模型中獲取Ember.js代理屬性的{{name}}屬性，而不是{{model.name}}。 Ember.ArrayConroller提供來自數(shù)組的代理，Ember.ObjectConroller提供來自對(duì)象的代理。

存儲(chǔ)應(yīng)用程序?qū)傩?/span>

有時(shí)您需要在您的服務(wù)器上保存應(yīng)用程序的屬性。您可以通過將應(yīng)用程序?qū)傩源鎯?chǔ)在控制器上來存儲(chǔ)應(yīng)用程序?qū)傩缘纳芷凇?/span>

例子

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Controller</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="index">
         <h2>Using setupController function:</h2>
         {{content}}
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.IndexRoute = Ember.Route.extend({
            //set up the controller and its content
            setupController: function(controller) {
               controller.set('content','Welcome to Tutorials Point');
            }
         });
      </script>
   </body>
</html>

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

將上面的代碼保存在controller.htm文件中
在瀏覽器中打開此HTML文件。

使用ObjectController表示單個(gè)模型

要表示單個(gè)模型，可以使用Ember.ObjectController。在路徑的setupController中設(shè)置ObjectController的model屬性以表示要使用的模型。模板將為屬性的值查找ObjectController，并且控制器在模型中查找具有相同名稱的屬性。

Ember.ObjectController.extend（{
  //put your properties
}）;

在上面的代碼中，聲明了ObjectController類。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Representing a Single Model with Objectcontroller</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="index">
         <h2>Tag:</h2>
         <p><b>{{tag}}<b></p>
         <h2>Content:</h2>
         <p><i>{{content}}</i>lt;/p>
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         //declaring objectController with 'tag' as property and assigned value as Tutorialspoint
         App.IndexController = Ember.ObjectController.extend({
            tag: "Tutorialspoint"
         });

         App.IndexRoute = Ember.Route.extend({
            //setting up the controller with the 'content' property
            setupController: function(controller) {
               controller.set('content','https://tutorialspoint.com');
            }
         });
      </script>
   </body>
</html>

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

將上面的代碼保存在control_sing_mod.htm文件中
在瀏覽器中打開此HTML文件。

用Arraycontroller表示多個(gè)模型

要表示模型數(shù)組，您可以使用Ember。 ArrayController。在路徑的setupController中設(shè)置ArrayController的model屬性，以表示要使用的模型。

Ember.ArrayController.extend（{
   //do the logic
}）;

在上面的代碼中，聲明了ArrayController類

例子

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Representing Multiple Models with Arraycontroller</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars">
         <h2>Array Elements:</h2>
         {{#each user in controllers.users}}
            <li>{{user}}</li>
         {{/each}}
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.ApplicationController = Ember.Controller.extend({
            //needs referring the users controller
            needs: ['users']
         });

         App.UsersController = Ember.ArrayController.extend({
            //users controller
            content: ['Mack', 'Mona', 'Manu']
         });
      </script>
   </body>
</html>

輸出

讓我們來執(zhí)行以下步驟來看看上面的代碼工作：

除上文中mult_mod_arry_cntrl.htm文件中的代碼
打開瀏覽器這個(gè)HTML文件。

下表列出了數(shù)組的下行控制器

序號(hào)	數(shù)組控制器及說明
1	排序數(shù)組排序內(nèi)容。
2	項(xiàng)目控制器它在迭代項(xiàng)目時(shí)指定ArrayController中的單個(gè)項(xiàng)目。

管理控制器之間的依賴關(guān)系

在嵌套的資源，你需要設(shè)置兩個(gè)控制器之間的連接，你也可以多個(gè)控制器通過使用控制器的陣列連接在一起。

Ember.Controller.extend（{
  nameofArray: ['value1', 'value2']
}）;

在上面的代碼中，nameofArray是由用戶給定的自定義數(shù)組名，value1和value2是數(shù)組的內(nèi)容。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Managing Dependencies Between Controllers</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars">
         <!-- accessing it's parent PostController -->
         <b>Signed in as {{controllers.post.content}}</b>
         <!-- accessing it's parent UserController -->
         <p><b>All Users:</b></p>
         {{#each user in controllers.users}}
            <li>{{user}}</li>
         {{/each}}
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.ApplicationController = Ember.Controller.extend({
            needs: ['post', 'users']
         });

         App.UsersController = Ember.ArrayController.extend({
            //Users Controller holds content as an array  with 3 values
            content: ['Mack', 'Mona', 'Manu']
         });

         App.PostController = Ember.ObjectController.extend({
            //Post Controller holds content property as
            content: 'Manu'
         });
      </script>
   </body>
</html>

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

將上面的代碼保存在contrl_mod_multi_depdency.html文件中
在瀏覽器中打開此HTML文件。

以上內(nèi)容是否對(duì)您有幫助：

← EmberJS 視圖

EmberJS 測(cè)試 →

寫筆記

我要補(bǔ)充