如何使用ember.js爲視圖定義控制器？

不知何故，我不明白如何實現需要使用ember.js的某個控制器的視圖。我將嘗試解釋我以一個示例運行的問題：如何使用ember.js爲視圖定義控制器？

假設我想構建一個創建簡單待辦事項列表的視圖組件：它包含一個文本框。該字段的下方是到目前爲止輸入的所有待辦事項列表。該視圖應該有一個存儲待辦事項的控制器（因爲我不必在這一點上推動它們存儲）。

我希望視圖可以在webapp的不同位置（通過我的把手模板）使用，所以它應該獨立於它通過它訪問的路線。

我的模板是這樣的：

<?xml version="1.0" encoding="utf-8"?> 
<html> 
    <head> 
    <script src="../shared/libs/jquery-1.9.1.js"></script> 
    <script src="../shared/libs/handlebars-1.0.0-rc.3.js"></script> 
    <script src="../shared/libs/ember-1.0.0-rc.1.js"></script> 
    <script src="todo.js"></script> 
    </head> 
    <body> 
    <script type="text/x-handlebars" data-template-name="application"> 
     {{ view App.TodolistView }} 
    </script> 

    <script type="text/x-handlebars" data-template-name="todolistView"> 
     {{view App.CreateTodoTextField 
     placeholder="Enter your todo here" 
     size=100 
     }} 
     <ul> 
     {{#each todo in controller}} 
      <li>{{todo}}</li> 
     {{/each}} 
     </ul> 
    </script> 
    </body> 
</html>

我的應用邏輯是這樣的：

window.App = Ember.Application.create(); 

App.TodolistView = Ember.View.extend({ 
    templateName: 'todolistView' 
}); 

App.TodolistController = Ember.ArrayController.create({ 
    content: [], 
    createItem: function(item) { 
    this.pushObject(item); 
    } 
}); 

App.CreateTodoTextField = Ember.TextField.extend({ 
    insertNewline: function() { 
    var value = this.get('value'); 
    if (value) { 
     App.TodolistController.createItem(value); 
     this.set('value', ''); 
    } 
    } 
});

我有兩個問題與該代碼：

當我TodolistView嘗試訪問控制器與

{{#each todo in controller}}

它實際上訪問的ApplicationController中，而不是TodolistController

還呼籲

App.TodolistController.createItem(value);

看起來像一個壞主意，我說：即如果我在一個頁面上有兩個TodoListView，該怎麼辦？ createItem應該是相當呼籲TodolistController的當前實例...

也許我缺少的定義與ember.js意見的一個核心概念...

來源

2013-02-22 laberning

解決方案的第一個問題：使用需求。請參閱此鏈接：http：//stackoverflow.com/questions/14388249/accessing-controllers-from-other-controllers – Dinesh 2013-02-22 10:59:07

其實問題是你沒有使用路由器的概念，這是Ember的核心概念。你有意忽略它嗎？ – mavilein 2013-02-22 11:27:49

@mavilein我的想法是：應用程序的路由器將自動創建，Todolist應該只是一個View組件，所以我不確定它是否需要一個路由器。 – laberning 2013-02-22 12:16:09

App.CreateTodoTextField = Ember.TextField.extend({ 
    insertNewline: function() { 
    var value = this.get('value'); 
    if (value) { 
     App.TodolistController.createItem(value); 
     this.set('value', ''); 
    } 
    } 
});

Todoliscontroller無法訪問喜歡這個。只有它的實例可以在下面的方式訪問：

var controller = this.get('controller'); 
controller.controllerFor('todolist').createItem(value);

來源

2013-02-22 11:03:26 Dinesh

感謝您的提示。其實'controllerFor'給了我一個棄用警告，所以我最終使用'this.get（'controller'）。get（'controllers.todolist'）。createItem（value）;與上面提到的「需求」相結合。我會在後面發佈對我有用的東西，但我仍然不確定這是否是它打算完成的方式。 – laberning 2013-02-22 12:19:18

是的，你是對的。 – Dinesh 2013-02-22 12:32:03

謝謝你的提示，這是什麼，對我的作品，但我仍然不知道這是它打算使用方式：

HBS

<script type="text/x-handlebars" data-template-name="todolistView"> 
    {{view App.CreateTodoTextField 
    placeholder="Enter your todo here" 
    size=100}} 
    <ul> 
     {{#each todo in controllers.todolist}} 
     <li>{{todo}}</li> 
     {{/each}} 
    </ul> 
</script> 

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

App.CreateTodoTextField = Ember.TextField.extend({ 
    insertNewline: function() { 
    var value = this.get('value'); 
    if (value) { 
     this.get('controller').get('controllers.todolist').createItem(value); 
     this.set('value', ''); 
    } 
    } 
});

來源

2013-02-22 12:24:08 laberning

如何使用ember.js爲視圖定義控制器？

回答

相關問題