ember.js - todos示例

我正在嘗試通過本教程學習ember - http://www.tuanleaded.com/blog/2012/04/getting-started-with-ember-js-the-missing-to-dos-manual/我有以下html和javascript，但是當我運行它並輸入待辦事項，然後按Enter鍵時，它只會添加一個複選框到列表中，而不是在標題爲待辦事項的複選框旁邊添加標籤。我注意到在例子中帶有ember.js的todo項目做了同樣的事情，我不知道爲什麼。ember.js - todos示例

這裏是html。

<!doctype html> 
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <title></title> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link rel="shortcut icon" href="/favicon.ico"> 
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 
    <link rel="stylesheet" href="css/style.css?v=2"> 

    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <script type="text/x-handlebars"> 
    {{view Todos.CreateToDoView id="new-todo" placeholder="What needs to be done?"}} 

    {{#collection contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}} 
     {{view Em.Checkbox titleBinding="content.title" valueBinding="content.isDone"}} 
    {{/collection}} 
    </script> 

    <!-- The missing protocol means that it will match the current protocol, either http or https. If running locally, we use the local jQuery. --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script> 
    <script src="js/libs/handlebars-1.0.0.beta.6.js"></script> 
    <script src="js/libs/ember-1.0.pre.min.js"></script> 
    <script src="js/app.js"></script> 
</body> 
</html>

，這裏是我的app.js文件...

/*models*/ 

var Todos = Em.Application.create(); 

Todos.Todo = Em.Object.extend({ 
    title: null, 
    isDone: false 
}); 


/*controller*/ 

Todos.todosController = Em.ArrayProxy.create({ 
    content:[], 

    createTodo: function(title){ 
     var todo = Todos.Todo.create({ title: title }); 
     this.pushObject(todo); 
    } 
}); 

/*views*/ 

Todos.CreateToDoView = Em.TextField.extend({ 
    insertNewline : function(){ 
     var value = this.get("value"); 

     if (value){ 
      Todos.todosController.createTodo(value); 
      this.set("value",""); 
     } 
    } 
});

來源

2012-09-18 geoff swartz

{{#collection contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}} 
    {{view Em.Checkbox titleBinding="content.title" valueBinding="content.isDone"}} 
{{/collection}}

所有你這裏做的是顯示一個複選框。 Ember.Checkbox沒有標題或titleBinding的概念。如果您只在該複選框旁邊添加{{view.content.title}}，您會在旁邊看到標題節目。

見Ember.Checkbox它所支持/不：https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/checkbox.js

UPDATE：

我已經改變了你的小提琴是工作。很多小的變化，讓我知道如果您有任何問題：http://jsfiddle.net/WKn3P/2/

來源

2012-09-18 03:05:26 Ryan

好吧，我已經更新了我的代碼，但它仍然不顯示我輸入的內容。 {{view Em.Checkbox titleBinding =「content.title」valueBinding =「content.isDone」}} {{content.title}} –

您可以創建一個jsfiddle。這樣我們可以一起編輯，看看有什麼不對。 – Ryan

好的，但現在我甚至無法加載它。我引用了所有相同的腳本，因此我不確定發生了什麼。這裏的鏈接 - http://jsfiddle.net/WKn3P/ –

ember.js - todos示例

回答

相關問題